Skip to content
← Back to rules

vue/no-shared-component-data Correctness

🚧 An auto-fix is planned for this rule, but not implemented at this time.

它的作用

强制 Vue 组件定义中的 data 属性必须是一个函数。

为什么这不好?

data 以对象字面量形式声明时,同一个对象会在组件的每个实例之间共享,这会导致跨实例的状态污染。通过函数返回一个新的对象可以避免这一点。

此规则适用于通过 Vue.component(...)Vue.extend(...)Vue.mixin(...)app.component(...)app.mixin(...)component(...)createApp(...)defineComponent(...)defineNuxtComponent(...), 以及 .vue 文件中的 export default {} 到达的组件定义。new Vue({...}) 不在覆盖范围内(该实例不会在组件之间共享 data)。

示例

以下是此规则的错误代码示例:

vue
<script>
Vue.component("some-comp", {
  data: {
    foo: "bar",
  },
});
</script>

以下是此规则的正确代码示例:

vue
<script>
Vue.component("some-comp", {
  data() {
    return { foo: "bar" };
  },
});
</script>

如何使用

To enable this rule using the config file or in the CLI, you can use:

json
{
  "plugins": ["vue"],
  "rules": {
    "vue/no-shared-component-data": "error"
  }
}
ts
import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["vue"],
  rules: {
    "vue/no-shared-component-data": "error",
  },
});
bash
oxlint --deny vue/no-shared-component-data --vue-plugin

版本

此规则于 v1.67.0 中添加。

参考资料