vue icon indicating copy to clipboard operation
vue copied to clipboard

[Vue 2.7] [Vue warn]: Avoid using variables that start with _ or $ in setup().

Open jayzun opened this issue 1 year ago • 6 comments

Version

2.7.3

Reproduction link

codesandbox.io

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==

jayzun avatar Mar 03 '23 08:03 jayzun

They are just warnings and do not affect behavior. see #12587

stefan-ysh avatar Mar 03 '23 08:03 stefan-ysh

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

jayzun avatar Mar 06 '23 02:03 jayzun

This happens to me when i upgrade Nuxt 2 to Bridge version, which also uses Vue 2.7.x

imrim12 avatar May 09 '23 10:05 imrim12

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

image image

imrim12 avatar May 09 '23 10:05 imrim12

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.

VividLemon avatar May 10 '23 16:05 VividLemon

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

privatenumber avatar Feb 11 '24 05:02 privatenumber