Skip to content
New issue

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

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

Already on GitHub? Sign in 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

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

No branches or pull requests

7 participants