如何让Vue对v-for中不存在的key抛出错误警告？

Vue 3 配置方案 #

• 开发模式下Vue默认会对未定义的属性访问输出警告，若未看到提示，可检查是否开启了控制台的Vue警告，或确认项目处于开发模式（而非生产模式）。
• 启用运行时严格模式，强制触发更严格的错误检查：

  import { createApp } from 'vue'
  import App from './App.vue'
  
  const app = createApp(App, {
    strict: true
  })
  app.mount('#app')
  

• 自定义警告处理器，捕获并将这类未定义属性的警告转为错误抛出：

  app.config.warnHandler = (msg, vm, trace) => {
    if (/Property .+ was accessed during render but is not defined/.test(msg)) {
      throw new Error(msg + '\n' + trace)
    }
  }
  

Vue 2 配置方案 #

• 全局开启严格模式，触发未定义属性的错误提示：

  import Vue from 'vue'
  import App from './App.vue'
  
  Vue.config.productionTip = false
  Vue.config.strict = true
  
  new Vue({
    render: h => h(App)
  }).$mount('#app')
  

• 使用ESLint插件eslint-plugin-vue，开启vue/valid-v-for规则，在编码阶段提前检测v-for的key绑定是否合法。

注意事项 #

• 确保项目在开发模式下运行（如Vue CLI项目执行npm run serve），生产模式下Vue会关闭所有警告以优化性能。

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