noVueSetupPropsReactivityLoss

Este conteúdo não está disponível em sua língua ainda.

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
}