Skip to content

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

Open
@jayzun

Description

@jayzun

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

Activity

stefan-ysh

stefan-ysh commented on Mar 3, 2023

@stefan-ysh

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

jayzun

jayzun commented on Mar 6, 2023

@jayzun
Author

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

imrim12 commented on May 9, 2023

@imrim12

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

imrim12

imrim12 commented on May 9, 2023

@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

VividLemon

VividLemon commented on May 10, 2023

@VividLemon

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

privatenumber commented on Feb 11, 2024

@privatenumber
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

BobbyJonas commented on Dec 15, 2024

@BobbyJonas

any update?

jacekkarczmarczyk

jacekkarczmarczyk commented on Dec 15, 2024

@jacekkarczmarczyk

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @privatenumber@jacekkarczmarczyk@jayzun@VividLemon@BobbyJonas

        Issue actions

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