noVueReservedKeys

JavaScript (and super languages)

摘要

¥Summary

规则生效日期：v2.1.3

¥Rule available since: v2.1.3
诊断类别：lint/nursery/noVueReservedKeys

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

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

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

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

¥Sources:
- 与 vue/no-reserved-keys 相同
  
  ¥Same as vue/no-reserved-keys

如何配置

¥How to configure

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

描述

¥Description

禁止在 Vue 组件数据和计算属性中使用保留键。

¥Disallow reserved keys in Vue component data and computed properties.

Vue 保留某些键供其内部使用。在数据属性、计算属性、方法或其他组件选项中使用这些保留键可能会导致 Vue 组件出现冲突和不可预测的行为。

¥Vue reserves certain keys for its internal use. Using these reserved keys in data properties, computed properties, methods, or other component options can cause conflicts and unpredictable behavior in your Vue components.

此规则禁止使用 Vue 保留键，例如：

¥This rule prevents the use of Vue reserved keys such as:

以 $ 开头的键（例如，$el、$data、$props、$refs 等）

¥Keys starting with $ (e.g., $el, $data, $props, $refs, etc.)
数据属性中以 _ 开头的键（保留给 Vue 内部使用）

¥Keys starting with _ in data properties (reserved for Vue internals)

示例

¥Examples

无效

¥Invalid

1
<script>
2
export default {
3
    data: {
4
        $el: '',
5
    },
6
};
7
</script>

code-block.vue:3:9 lint/nursery/noVueReservedKeys ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Key $el is reserved in Vue.
  
    1 │ export default {
    2 │     data: {
  > 3 │         $el: ”,
      │         ^^^
    4 │     },
    5 │ };
  
  ℹ Rename the key to avoid conflicts with Vue reserved keys.

1
<script>
2
export default {
3
    data() {
4
        return {
5
            _foo: 'bar',
6
        };
7
    },
8
};
9
</script>

code-block.vue:4:13 lint/nursery/noVueReservedKeys ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Keys starting with an underscore are reserved in Vue.
  
    2 │     data() {
    3 │         return {
  > 4 │             _foo: ‘bar’,
      │             ^^^^
    5 │         };
    6 │     },
  
  ℹ Rename the key to avoid conflicts with Vue reserved keys.

1
<script>
2
export default {
3
    computed: {
4
        $data() {
5
            return this.someData;
6
        },
7
    },
8
};
9
</script>

code-block.vue:3:9 lint/nursery/noVueReservedKeys ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Key $data is reserved in Vue.
  
    1 │ export default {
    2 │     computed: {
  > 3 │         $data() {
      │         ^^^^^
    4 │             return this.someData;
    5 │         },
  
  ℹ Rename the key to avoid conflicts with Vue reserved keys.

1
<script>
2
export default {
3
    methods: {
4
        $emit() {
5
            // This conflicts with Vue's built-in $emit
6
        },
7
    },
8
};
9
</script>

code-block.vue:3:9 lint/nursery/noVueReservedKeys ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Key $emit is reserved in Vue.
  
    1 │ export default {
    2 │     methods: {
  > 3 │         $emit() {
      │         ^^^^^
    4 │             // This conflicts with Vue’s built-in $emit
    5 │         },
  
  ℹ Rename the key to avoid conflicts with Vue reserved keys.

有效

¥Valid

1
<script>
2
export default {
3
    data() {
4
        return {
5
            message: 'Hello Vue!',
6
            count: 0,
7
        };
8
    },
9
};
10
</script>

1
<script>
2
export default {
3
    computed: {
4
        displayMessage() {
5
            return this.message;
6
        },
7
    },
8
};
9
</script>

noVueReservedKeys

摘要

如何配置

描述

示例

无效

有效

相关链接