[Vue warn]: Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.

[rothskeller]

Version

3.0.0-rc.9

Reproduction link

https://github.com/rothskeller/vuewarnreport

Steps to reproduce

• git clone
• yarn install
• yarn dev
• click on links in demo

What is expected?

No warning.

What is actually happening?

[Vue warn]: Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.

---

First, note that this is the same symptom as #1991 but not the same cause.

This is happening because of the call to watch(route, ...) which is made in client/src/pages/ID.vue. The route object has within it a reference to the component, so watching the route includes watching the component, which triggers the warning. But watching the route for changes is a typical, and indeed essential, idiom in vue-router which should not result in a console warning. I don't know whether this should be considered a vue-next bug or a vue-router-next bug, but I'm guessing the former.

[yyx990803]

watch(route) is implicitly deep: true, which traverses arbitrarily deep properties. So technically, this is expected behavior. Also, deep traversing a complex object when you only care about a few properties is wasteful.

Your use case can and should be rewritten using a computed property instead:

const id = computed(() => {
   return Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
})

If you must use a watcher, you should also use watchEffect and avoid deep watches:

watchEffect(() => {
  id.value = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
})

[rothskeller]

@yyx990803 Your response makes sense, but permit me to note that it disagrees with the documentation for view-router-next, which explicitly calls for watching the route object. I do not know how to reconcile between two core Vue projects.

[posva]

Can you point me the part of the documentation so I can take a look?

[rothskeller]

@posva I see two references: here and here.

[posva]

Thanks!

[mannok]

@yyx990803 How about setting watch(route, () => {}, { deep: false }) instead? Can I avoid deep watch as well?

[anming-john]

watch(route) is implicitly deep: true, which traverses arbitrarily deep properties. So technically, this is expected behavior. Also, deep traversing a complex object when you only care about a few properties is wasteful.

Your use case can and should be rewritten using a computed property instead:

const id = computed(() => {
   return Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
})

If you must use a watcher, you should also use watchEffect and avoid deep watches:

watchEffect(() => {
  id.value = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
})

我在vue3 中试用了 vue2 的watch: { $route(newVal, oldVal) {...}} 也会看到这个报警， 这个怎么解决？

[luchaoqun123]

vue3 中，这个是devtools 6.0.0 beta 2打印的，我把devtools关闭，这个waring就消失了

[white-007]

Close vue-devtools and the warning will disappear. This should be the problem with DevTools

[ChenWeihua123]

vue3 中，这个是devtools 6.0.0 beta 2打印的，我把devtools关闭，这个waring就消失了

请问怎么关闭 vue-devtools （vue3）
我也遇到了同样的警告信息，页面直接卡死无响应

[lvsong77]

vue3 中，这个是devtools 6.0.0 beta 2打印的，我把devtools关闭，这个waring就消失了

same situation with u, it's OK when I closed devtool.

[WalkAlone0325]

You can specify watch(route.xx),So you don't have to deep: true,i try it's OK.

[jinxinkai]

vue3 中，这个是devtools 6.0.0 beta 2打印的，我把devtools关闭，这个waring就消失了

请问怎么关闭 vue-devtools （vue3）
我也遇到了同样的警告信息，页面直接卡死无响应

set devtools in “when u click the extension” mode

[leer561]

https://next.router.vuejs.org/guide/advanced/composition-api.html#accessing-the-router-and-current-route-inside-setup
watch( () => route.params.id, async newId => { userData.value = await fetchUser(newId) } )

[mehdinourollah]

For me it's because of my Axios requests ...Whenever I use an Axios (or even fetch doesn't matter) I get this warning...It doesn't vanish even with disabling devtools (So It has nothing to do with the devtools).
I used interceptors of Axios to handle some error/catch cases but I don't think it has something to do with it because when I comment out those lines it still gives me warning.

[mehdinourollah]

Even in the store when I save my current form ( vue component as form) it gives me this...And in the production it removes it so I can't go further

[MrYusheng]

I also had this problem, and I didn't listen to the whole route, but I found that if I used the whole route inside the method, I would also get a warning, so I only called what I needed to use, and the warning didn't appear after that.

[davevasquez]

Even in the store when I save my current form ( vue component as form) it gives me this...And in the production it removes it so I can't go further

I'm encoutering a similar issue when dispatching an action to store AG-Grid's Model in my Vuex store. Specifically this bit of code store.dispatch('setSelectedShifters', event.api.getModel()); Considering I'm dispatching actions all over the place without issue, I am wondering if this has more to do with something AG Grid is doing? I have confirmed that the issue goes away when I avoid committing this model, but I don't want to do that.

UPDATE:

So I just removed the "CreateLogger" plugin from my store and the warnings went away. It looks like the logger is causing these in certain circumstances.

[bglaz]

Are there other known causes of this "Avoid app logic" warning? I am migrating from Vue 2 to 3, and some routes show this warning in the console hundreds, if not thousands of times on one page.

[bglaz]

Are there other known causes of this "Avoid app logic" warning? I am migrating from Vue 2 to 3, and some routes show this warning in the console hundreds, if not thousands of times on one page.

Saving a component and triggering HMR also causes this warning to show up multiple times.

[bglaz]

It looks like these warnings are coming from the new vue dev tools chrome extension.

[zangbianxuegu]

This happens to me when destructuring a ref without .value.
It looks like there's something wrong with request, the request is very slow, the page is stuck and can't interact. While the console shows the warnings.

[jonah-butler]

On another note, this error popped up for me today and it was inside an Ionic/Vue3 project. And it was related to using an Ionic component - in my case the IonChip component - without importing it. So its reference in my template without the import was the culprit.

[Dorianslavov]

Currently migrating nuxt 2 project to nuxt 3 and I started getting this error as well. What I've noticed is that it doesn't happen because of something specific, but rather because of some other errors happening. For example in my case since we wanted to still use vuex in nuxt 3, I was using mapActions but had the wrong module name passed so this warning started showing infinitely and immediately resulted in crashing & freezing the whole browser

For anyone experiencing this error, I suggest you start commenting code little by little so you find the culprit in your codebase, but unfortunately there's no specific fix as the warning itself doesn't describe what's wrong exactly