vue.js - Vue 组件 - 如何处理非 react 性数据？

Question

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

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

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

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

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

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

调用它

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

Answer 1

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

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

这 3 种方法的行为不同:

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

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

方法三:方法
这将在每次模板重新呈现时调用 genId()。每次检测到 View 正在监听的变量发生变化或调用 $forceUpdate() 时都会发生这种情况。

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