Avoid app logic that relies on enumerating keys on a component instance

user_7510971 0
Viewed 6200

in my complex vue-project I am getting this warning:

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

Unfortunately I can not find the reason for this warning just by this message:

enter image description here

How can I track down the reason for this warning?

vuejs3 vue.js
4 Answers

Check if your watching an entire route object anywhere in your code. Doing so throws that error (in my case).

Refer this vue documentation on watching routes Accessing router and current route inside setup

The route object is a reactive object, so any of its properties can be watched and you should avoid watching the whole route object. In most scenarios, you should directly watch the param you are expecting to change.

user_134882820

So I was also having this issue, but not for the reasons the accepted answer provided. It was occurring due to my Vuex store. After a lot of digging I discovered the cause was the presence of the "CreateLogger" plugin.

So if you're having this issue and it's not due to you watching an entire route, check if you're using the CreateLogger plugin in Vuex. That might be the culprit.

user_15589300

This happens for me when I pass this to a data object

data() {
    return {
       updateController: new UpdateController({
           reportTo: this
       })
    }   
}

This used to work fine with Vue 2 but causes this error in Vue 3.
Making this modification solved the problem for me.

data() {
    return {
       updateController: new UpdateController({
           reportTo: () => this
       })
    }   
}

I know this might be anti-pattern but I needed to inject partial reactivity to a non-reactive part of a JS library and this was the most not complicated way of achieving this that I can think of.

user_31735970

This happens to me when destructuring a ref without .value.

user_20170740
Related