created() 或计算属性中的 vuejs 初始化数据函数（方法）

Posted 2023-02-23

【中文标题】created() 或计算属性中的 vuejs 初始化数据函数（方法）

【英文标题】：vuejs init data function(methods) in created() or computed property

【发布时间】：2020-09-20 13:45:08

【问题描述】：

我正在制作一张简单的表格，并开始思考哪种书写方式更好或更准确。我知道使用 created 钩子更好，但是.. 我只是想了解你们的想法。

我们必须显示实时数据（更新周期​​为 1 秒），但它非常多变。所以我在计算属性中调用了一个 initData() 函数，但我的前辈使用了 created() 钩子。

我： 1.方法： initData() axios.get().then() 2. 在计算属性中调用它（因为它每秒更新一次）：

getInitData()  this.initData() return this.data

我的前辈： 1.方法：相同 2. 在创建的钩子中调用它（因为它是 init）：created() this.initData() 3. 在计算属性中返回它（因为它每秒更新一次）：

 getInitData()  return this.data

那么...您认为这两种情况之间的性能差异是什么？

【问题讨论】：

这能回答你的问题吗？ Async Computed in Components - VueJS?

哇，谢谢你的链接，但我的问题更多的是关于“在哪里初始化数据，它将每秒更新一次”。我没有在 created() 中使用调用它，因为您的链接说计算用于缓存。但是我从链接中得到了一些想法，也许最好在 created() 中设置然后将其缓存在计算中。嗯……

在那个答案中，基本上它说计算属性不适用于异步数据。

是的，我已经检查过了。我们使用 vuex。那个例子是我的坏事。感谢您指出:)

【参考方案1】：

如果您在computed 中进行响应式属性更改，它将创建一个无限循环

更改this.data ---> 计算属性recalculated --> 更改this.data

在computed 中，响应式数据被缓存并在发生更改时触发 DOM 更改。现在想象一下这种情况，当您在收到 API 响应后更改this.data，一旦this.data 发生更改，它将触发计算属性，您将再次创建网络请求并再次更改this.data 和计算属性。它将创建一个infinite 循环

而在created 钩子中，它表现为一个简单的方法，仅在您的component 被创建时触发，这意味着您将第一次获取数据并改变this.data。在您重新创建组件之前，它不会再次触发

【讨论】：

啊，我根本没有想到循环。谢谢！很清楚

很高兴您对解决方案感到好奇。乐于助人