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

Question

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

一些推理：

在使用Vue.js时，有时会遇到需要在组件实例中存储一些静态数据的情况。就我所理解的Vue而言，组件实例可以被视为具有一些特殊属性(如.$data、.$el、.$parent等)的普通对象。这告诉我，我可以对对象做我想做的任何事情，只需要注意不要与内部使用的属性名称发生冲突。

这方面的一个常见示例是一个元素，它包含一些其他逻辑甚至影子DOM (例如，WebGl的画布)，引用绑定到Vue组件，这意味着存在一些绑定到组件生命周期的init逻辑和dispose逻辑。这里的引用可以是代理对象，而不一定是DOM元素本身。我通常将它作为带有"_“前缀的直接属性存储在组件中：

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

所以广告1.污染组件实例是"ok-ish“和”安全“吗？或者我应该把它放到this.$data中，让它成为反应性数据？和广告2.，我最终找不到任何关于如何在Vue中使用非反应性数据的好指南。在某些情况下，它感觉应该包含在组件本身中，而不是在全局空间的某个地方。而且，这是完全错误的，还是没有约定的边缘情况？有人能给我一些论据，为什么我应该避免自定义的非反应性属性？

Answer 1

我不一定会说它是重复的，但你可能会发现这个问题的答案是相关的：

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

Vue核心小组也讨论了这个问题：

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

简单地说，直接将非反应性数据添加到this中没有什么问题。

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

从某种程度上讲，如果您使用Object.freeze冻结一个对象，那么Vue就不会试图使其具有反应性。这与对象是HTML元素的情况并不真正相关，但是如果您只是试图将大量静态数据远离反应性系统，那么这可能是一种更容易的方法。

Answer 2

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

当您在数据函数之外的数据上定义变量时，它们不会是反应性的。

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

<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>