noVueSetupPropsReactivityLoss

이 콘텐츠는 아직 번역되지 않았습니다.

JavaScript (and super languages)

Summary

Rule available since: v2.2.6
Diagnostic Category: lint/correctness/noVueSetupPropsReactivityLoss
This rule isn’t recommended, so you need to enable it.
This rule doesn’t have a fix.
The default severity of this rule is error.
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
      "correctness": {
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/correctness/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
}