noVueDataObjectDeclaration

JavaScript (and super languages)

摘要

¥Summary

规则生效日期：v2.1.4

¥Rule available since: v2.1.4
诊断类别：lint/nursery/noVueDataObjectDeclaration

¥Diagnostic Category: lint/nursery/noVueDataObjectDeclaration
此规则包含 safe 修复程序。

¥This rule has a safe fix.
此规则的默认严重级别为 information。

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

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

¥Sources:
- 灵感来自 vue/no-deprecated-data-object-declaration
  
  ¥Inspired from vue/no-deprecated-data-object-declaration
- 灵感来自 vue/no-shared-component-data
  
  ¥Inspired from vue/no-shared-component-data

如何配置

¥How to configure

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

描述

¥Description

强制要求 Vue 组件的 data 选项声明为函数。

¥Enforce that Vue component data options are declared as functions.

在 Vue 3+ 中，将 data 定义为对象已被弃用，因为它会导致组件实例之间共享可变状态。此规则标记 data: { … } 的使用，并提供自动修复程序，将其转换为返回该对象的函数。

¥In Vue 3+, defining data as an object is deprecated because it leads to shared mutable state across component instances. This rule flags usages of data: { … } and offers an automatic fix to convert it into a function returning that object.

另请参阅：– Vue 迁移指南 – 数据选项：https://v3-migration.vuejs.org/breaking-changes/data-option.html :contentReference[oaicite:0]{index="0"} – ESLint Vue 插件：no-deprecated-data-object-declaration：https://eslint-vue.nodejs.cn/rules/no-deprecated-data-object-declaration :contentReference[oaicite:1]{index="1"}

¥See also: – Vue Migration Guide – Data Option: https://v3-migration.vuejs.org/breaking-changes/data-option.html :contentReference[oaicite:0]{index="0"} – ESLint Plugin Vue: no-deprecated-data-object-declaration: https://eslint-vue.nodejs.cn/rules/no-deprecated-data-object-declaration :contentReference[oaicite:1]{index="1"}

示例

¥Examples

无效

¥Invalid

1
// component-local data via function
2
export default {
3
  /* ✗ BAD */
4
  data: { foo: null },
5
};

1
// Composition API helper also deprecated
2
defineComponent({
3
  /* ✗ BAD */
4
  data: { message: 'hi' }
5
});

1
// Vue 3 entrypoint via createApp
2
createApp({
3
  /* ✗ BAD */
4
  data: { active: true }
5
}).mount('#app');

有效

¥Valid

1
// component-local data via function
2
export default {
3
  /* ✓ GOOD */
4
  data() {
5
    return { foo: null };
6
  }
7
};

1
// global registration with function syntax
2
Vue.component('my-comp', {
3
  /* ✓ GOOD */
4
  data: function () {
5
    return { count: 0 };
6
  }
7
});

1
// Composition API and createApp entrypoints
2
defineComponent({
3
  /* ✓ GOOD */
4
  data() {
5
    return { message: 'hi' };
6
  }
7
});
8

9
createApp({
10
  /* ✓ GOOD */
11
  data: function() {
12
    return { active: true };
13
  }
14
}).mount('#app');

noVueDataObjectDeclaration

摘要

如何配置

描述

示例

无效

有效

相关链接