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

Posted 2023-02-22

【中文标题】Vue 组件 - 如何处理非反应性数据？

【英文标题】：Vue Component - How to handle non-reactive data?

【发布时间】：2019-03-14 16:47:18

【问题描述】：

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

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

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

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

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

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

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

【参考方案1】：

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

created() 
  this.myId = genId()

这 3 种方法的行为不同：

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

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

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

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

【讨论】：

非常感谢！！我知道this._uid，但在我能找到的所有文档中，他们建议不要使用它，因为它是私有财产，而且他们不承诺支持它向前发展？