noVueDataObjectDeclaration

Ta treść nie jest jeszcze dostępna w Twoim języku.

JavaScript (and super languages)

Summary

Rule available since: v2.1.4
Diagnostic Category: lint/nursery/noVueDataObjectDeclaration
This rule has a safe fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Inspired from vue/no-deprecated-data-object-declaration
- 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

Enforce that Vue component data options are declared as functions.

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.

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.vuejs.org/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');