Vue2迁移Vue3时控制台高频警告致页面卡顿，如何解决？

临时应急：先让浏览器恢复流畅 #

如果现在急需解决卡顿问题，可以先临时屏蔽警告：

• 修改项目入口文件（比如main.js/main.ts），添加全局警告拦截：

  import { createApp } from 'vue'
  import App from './App.vue'
  
  const app = createApp(App)
  // 直接关闭所有Vue警告
  app.config.warnHandler = () => {}
  // 若想保留部分重要警告，可添加过滤逻辑
  // app.config.warnHandler = (msg) => {
  //   // 仅保留包含特定关键词的警告，其余拦截
  //   if (msg.includes('你关注的关键词')) console.warn(msg)
  // }
  app.mount('#app')
  

• 也可以直接在浏览器控制台搜索框输入-warn，临时隐藏所有警告（仅本地显示隐藏，不改变代码逻辑）

彻底根治：从源头消除警告 #

临时屏蔽只是权宜之计，要彻底解决需处理触发警告的代码：

• 先定位核心警告类型：从截图来看，这些警告基本是Vue3对Vue2旧语法的兼容性提示，比如废弃的$children、$listeners，或是选项式API写法不符合Vue3规范
• 用官方适配层减少冗余警告：安装@vue/compat，它兼容大部分Vue2语法，且只会输出必要的迁移提示，不会产生海量重复警告。安装后修改入口文件：

  import { createApp } from '@vue/compat'
  import App from './App.vue'
  
  const app = createApp(App)
  // 开启Vue2兼容模式，仅输出关键迁移警告
  app.config.compilerOptions.compatConfig = { MODE: 2 }
  app.mount('#app')
  

• 批量替换废弃API：比如把this.$children换成用ref获取子组件实例，$listeners合并到$attrs中，全局过滤器Vue.filter改为全局属性或局部过滤器
• 排查循环渲染逻辑：如果警告来自列表循环，检查v-for的key值是否唯一，或是循环内组件是否重复触发警告，逐个修复

工具辅助快速定位问题 #

使用Vue DevTools的「警告」面板，查看警告的聚合统计信息，优先处理触发次数最多的几类警告，能快速大幅减少警告数量

内容的提问来源于stack exchange，提问作者Diefair