Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

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

Open
jayzun opened this issue Mar 3, 2023 · 8 comments

Comments

@jayzun
Copy link

jayzun commented Mar 3, 2023

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

@stefan-ysh
Copy link

stefan-ysh commented Mar 3, 2023

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

@jayzun
Copy link
Author

jayzun commented Mar 6, 2023

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

@imrim12
Copy link

imrim12 commented May 9, 2023

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

@imrim12
Copy link

imrim12 commented May 9, 2023

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

@VividLemon
Copy link

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.

@privatenumber
Copy link
Contributor

isReserved checks whether a string starts with $ or _:

export function isReserved(str: string): boolean {
const c = (str + '').charCodeAt(0)
return c === 0x24 || c === 0x5f
}

This line of the setup() initialization skips properties that start with $ or _:

vue/src/v3/apiSetup.ts

Lines 62 to 66 in bed04a7

if (!isReserved(key)) {
proxyWithRefUnwrap(vm, setupResult, key)
} else if (__DEV__) {
warn(`Avoid using variables that start with _ or $ in setup().`)
}

@BobbyJonas
Copy link

any update?

@jacekkarczmarczyk
Copy link

image

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants