Question

什么是组件实例的自定义属性的安全命名？
推荐的存储特定于组件但非反应性数据的方法是什么？

一些推理：

在使用Vue.js时，有时会遇到需要在组件实例内存储一些静态数据的情况。据我了解，Vue可以将组件实例视为具有某些特殊属性（this。$ data，。$ el，。$ parent等）的普通对象。这告诉我，我可以对对象执行任何操作，只是要注意不要与内部使用的属性名称冲突。

一个常见的例子是一个Web组件元素，其中包含一些其他逻辑甚至影子DOM（例如，WebGl的Canvas），并且引用绑定到Vue组件，这意味着存在一些初始化逻辑和处置逻辑，这些逻辑绑定到组件的生命周期。这里的引用可以是代理对象，而不必是DOM元素本身。我通常将其存储为组件中的直接属性，并带有“ _”前缀：

<template>
  <my-custom-canvas @ready="canvasReady">
</template>
<script>
export default {
  methods: {
    canvasReady (canvas) { this._my_custom_canvas = canvas; }
  }
}
</script>

所以 ad 1 。污染这样的组件实例是否“正常”且“安全”？还是应该将其放入this.$data中，使其成为反应性数据？而广告2。最终，我找不到有关如何在Vue中处理非反应性数据的任何好的指南。在某些情况下，感觉应该将其包含在组件本身中，而不是放在全局空间之外。另外，这是完全错误的还是没有约定的情况？有人可以给我一些论点，为什么我应该避免使用自定义非反应性属性？

Answer 1

当我需要存储非反应性数据（例如const或enums）时，只需将其放入data函数外部的数据对象中，并放入创建的生命周期方法中即可。

当您在数据函数之外的数据上定义变量时，它们将不会是被动的。

例如，这会将其初始化为空值，并在需要时使其在模板中可用，但是如果更改，它将不会启动刷新。

<template>
  <my-custom-canvas @ready="canvasReady">
</template>
<script>
export default {
  methods: {
    canvasReady (canvas) { this.data.myCanvas = canvas; }
  },
  created() {
     this.data.myCanvas = null;
  }
}
</script>

但是，如果您不打算在模板内部使用它，则可以将其放在组件外部。

<template>
  <my-custom-canvas @ready="canvasReady">
</template>
<script>
const myCanvas = null;
export default {
  methods: {
    canvasReady (canvas) { myCanvas = canvas; }
  },
}
</script>

Answer 2

我不一定会称其为重复项，但您可能会发现与此问题相关的答案：

How to set a component non-reactive data in Vue 2?

Vue核心团队也讨论了此主题：

https://github.com/vuejs/vue/issues/1988

简短的答案是将非反应性数据直接添加到this并没有错。

Vue使用_和$前缀作为自己的内部属性（请参见此处https://vuejs.org/v2/api/#data），因此您可能会发现避免使用这些前缀实际上更安全。从名称冲突的角度来看，它实际上与命名道具，数据属性等没有什么不同，因为它们也通过this的属性公开。 mixin等的私有属性具有自己的约定，如https://vuejs.org/v2/style-guide/#Private-property-names-essential中所述。如果没有其他建议，建议您阅读详细说明部分，以进一步讨论Vue自己的命名约定。

在某种程度上相关的注释上，如果您使用Object.freeze冻结对象，则Vue不会尝试使其具有反应性。这与对象是HTML元素的情况并没有太大关系，但是如果您只是试图将大型静态数据保持在反应系统之外，那么这可能是一种更简单的方法。

Vue.js组件自定义非反应属性安全名称

2 个答案: