vue/no-shared-component-data Correctness
它的作用
强制 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 中添加。
