Ray-D-Song's Blog

奇怪的警告：Vue 避免枚举组件 key

2025-1-15 • 3min

问题描述

Vue 项目打包后，在浏览器中运行，会发生如下警告：

bash
1[Vue warn]: Avoid app logic that relies on enumerating keys on a component instance.

问题原因

这个警告的含义是：避免在组件实例上枚举键。
Vue 允许在开发环境下通过 for 或 Object.keys 等方法枚举组件实例上的键，生产环境下则不允许。

抽象之处在于，出现该警告时，warn trace 并不会给出具体的代码行数，而是提示在 vue.runtime.esm-bundler.js 文件中。
同时出现该警告的原因稀奇古怪，并不一定是代码中真的有枚举组件实例的键。

可能的原因和解决方案

vue-devtools 调试工具的 Bug

Vue Devtools 会监听组件实例，引发这个问题。可以先将 vue-devtools 卸载，判断是否是工具原因。
通过升级 vue-devtools 或 Vue 版本（也许）可以解决。

watch 监听了 route 对象

javascript
1const route = useRoute()
2/**
3 * 监听了整个 route 对象
4 * watch 默认是深层响应式，会触发该警告
5 */
6watch(() => route, () => {
7  // ...
8})
9
10// 修改为监听具体的 route 的属性
11watch(() => route.path, () => {
12  // ...
13})
14
15// 或者使用默认非深层响应式的 watchEffect
16watchEffect(() => {
17  console.log(route.path)
18})

路由守卫中传递了完整的 to 对象

javascript
1router.beforeEach((to, from, next) => {
2  addTab(to)
3})

这是我实际遇到的情况，在路由守卫中传递了完整的 to 对象，包括 component 属性，导致触发该警告。
正确的做法是按需传递 to 对象的属性。

javascript
1router.beforeEach((to, from, next) => {
2  addTab(to.path)
3})

参考