noVueSetupPropsReactivityLoss

Esta página aún no está disponible en tu idioma.

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`.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

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