vue
vue copied to clipboard
[Vue 2.7] [Vue warn]: Avoid using variables that start with _ or $ in setup().
Version
2.7.3
Reproduction link
Steps to reproduce
- Create a Vue 2.7 repo
- Use variables that start with $ in setup(). for example,
$config
What is expected?
Variables that start with $ setup to component.
What is actually happening?
- An Warning showed up on console: [Vue warn]: Avoid using variables that start with _ or $ in setup().
- variables that start with $ didn't setup to component.
This behavior only exists in Vue 2.7.x, which is different from both Vue 3 & @vue/composition-api. For example, in this Vue 3 reproductions, it's okay: https://sfc.vuejs.org/#eNp9kc9qhDAQxl9lCAVdUAM9igqll75BL7lYHbcu5g+TaA+Sd+9kd11KCz0l8+WbH/NNdvHiXLWtKGrR+IFmF8BjWF2nzKydpQA7EE4FDFa7NeAIESayGjJuypRRZrDGB3jiY5rP0CZ3nr3hslh4t7SMz9npMD08ByzPT9B2R3O19cuK7G7kbRQegouA2i19QK4AmnHeYB5bJXrnlLhqrLpu3w98jI1M87Ms2c23Rj4YohC3XKXuXXXx1nDyPZnV/cErUcNVSRqnTLUSnyE4X0vppyHt6+IrS2fJt4pWE2aNFXpdfpD98kgMVqL4wZAsbkgloRmRkP5j/rL+4SZsVCZylFfe4/33RPwG5f6dbg==
They are just warnings and do not affect behavior. see #12587
They are just warnings and do not affect behavior. see #12587
But, in the reproduction I presented, variables that start with $ actually didn't setup to the component
This happens to me when i upgrade Nuxt 2 to Bridge version, which also uses Vue 2.7.x
I forked the above sandbox and add both options API and composition API cases, they're not working https://codesandbox.io/s/romantic-aj-lx4m4s
I have gotten a similar issue when using async setup(). Pretty much no other code. Don't use async in the setup, no issue, use async in setup, issue.
isReserved
checks whether a string starts with $ or _:
https://github.com/vuejs/vue/blob/bed04a77e575d6c4c1d903f60087dca874f7213e/src/core/util/lang.ts#L12-L15
This line of the setup()
initialization skips properties that start with $ or _:
https://github.com/vuejs/vue/blob/bed04a77e575d6c4c1d903f60087dca874f7213e/src/v3/apiSetup.ts#L62-L66