vue.js - 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方法可以做到这一点？

标签： vue.js

Answer 1

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

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

这 3 种方法的行为不同：

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

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

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

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