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

Question

我正在忘记 Vue 2 组件中的反应性开销最佳实践。我需要使用 genId() 生成一次性字符串并将其分配给组件的 id 属性。在那之后继续观看似乎有点过头了。

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

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

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

2. 我从一年前的答案中读到Vue Forum，myID: genId() 应该进入created 钩子。对这种事情使用钩子是最佳实践吗？我认为不鼓励使用 hooks。

3. 或者我可以把它放在组件methods中，然后直接用:id="genId()调用它

有没有 Vue 方法可以做到这一点？

Answer 1

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

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

这 3 种方法的行为不同：

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

方法二：创建钩子
这将在创建组件对象时调用 genId() 并且不添加更改侦听器。

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

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