noVueSetupPropsReactivityLoss

Ce contenu n’est pas encore disponible dans votre langue.

JavaScript (and super languages)

Summary

Rule available since: v2.2.6
Diagnostic Category: lint/nursery/noVueSetupPropsReactivityLoss
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Inspired from vue/no-setup-props-reactivity-loss

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueSetupPropsReactivityLoss": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow destructuring of props passed to setup in Vue projects.

In Vue’s Composition API, props must be accessed as props.propertyName to maintain reactivity. Destructuring props directly in the setup function parameters will cause the resulting variables to lose their reactive nature.

Examples

Invalid

1
export default {
2
  setup({ count }) {
3
    return () => h('div', count);
4
  }
5
}

code-block.js:2:9 lint/nursery/noVueSetupPropsReactivityLoss ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Destructuring `props` in the `setup` function parameters loses reactivity.
  
    1 │ export default {
  > 2 │   setup({ count }) {
      │         ^^^^^^^^^
    3 │     return () => h(‘div’, count);
    4 │   }
  
  ℹ To preserve reactivity, access props as properties: `props.propertyName`.

Valid

1
export default {
2
  setup(props) {
3
    return () => h('div', props.count);
4
  }
5
}