Vue组件-如何处理非反应性数据？

Question

我正在跟踪Vue 2组件中的反应性开销最佳实践。我需要使用genId（）生成一个一次性字符串，并将其分配给组件的id属性。在那之后继续观看似乎太过分了。

1. :id="myID"将其插入html id的正确方法是吗？

然后，在设置源时，应将非反应性数据放在哪里？我有3个想法：

1. 将属性添加myID: genId()到data。但是，即使它不会更改，这也不会自动将其添加到监视列表吗？造成开销？

2. 我在Vue论坛上读了一个很老的答案，该答案myID: genId()应该会引起关注created。将挂钩用于此类操作是否是最佳做法？我以为不鼓励钩子。

3. 或者我可以将其放入组件中methods，然后直接使用:id="genId()

有Vue的方法吗？

Answer 1

对非反应性数据使用方法 2 （并且您在页面上多次使用该组件，因为添加更改侦听器的小开销会产生任何影响。）

created() {
  this.myId = genId()
}

这 3 种方法的行为不同：

方法 1：数据
这将在创建数据对象时调用 genId() 并添加更改侦听器。

方法二：created hook
组件对象创建时会调用genId()，不添加变化监听器。

方法 3：方法
每次模板重新渲染时都会调用 genId()。每次在视图正在侦听或$forceUpdate()调用的变量上检测到更改时都会发生这种情况。

附言。Vue 对象已经有一个唯一的 id：this._uid
但这是一个私有属性，可能会在 Vue 的未来版本中改变。