noVueSetupPropsReactivityLoss

JavaScript (and super languages)

摘要

¥Summary

规则生效日期：v2.2.6

¥Rule available since: v2.2.6
诊断类别：lint/nursery/noVueSetupPropsReactivityLoss

¥Diagnostic Category: lint/nursery/noVueSetupPropsReactivityLoss
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 information。

¥The default severity of this rule is information.
此规则属于以下域：

¥This rule belongs to the following domains:
- vue
来源：

¥Sources:
- 灵感来自 vue/no-setup-props-reactivity-loss
  
  ¥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

禁止在 Vue 项目中解构传递给 setup 的 props。

¥Disallow destructuring of props passed to setup in Vue projects.

在 Vue 的组合 API 中，必须使用 props.propertyName 访问 props 以保持响应式。直接在 setup 函数参数中解构 props 会导致生成的变量失去其响应式特性。

¥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
}

noVueSetupPropsReactivityLoss

摘要

如何配置

描述

示例

无效

有效

相关链接