Vue.js - 更新和渲染数组的性能成本

Posted

技术标签:

【中文标题】Vue.js - 更新和渲染数组的性能成本【英文标题】:Vue.js - Performance cost of update and render of an array 【发布时间】:2021-06-09 16:52:06 【问题描述】:

我在重新渲染数组项时遇到问题。我希望有人可以帮助我。 有一个代码: https://codesandbox.io/s/vuex-store-forked-2qx1g?file=/src/App.vue

我们有包含项目数组的组件。模板仅呈现集合中的第一项。 2 秒后,我们更改了第一个项目的标题 - 调用了更新的钩子,看起来是正确的 4 秒后,我们将新项目添加到数组 - 再次调用更新的钩子。 我是否正确理解将项目添加到数组会导致所有以前的项目重新呈现?

或者更新的钩子意味着虚拟 DOM 被改变但没有真正的重新渲染发生? 无论如何,这种情况会是大量数据的性能问题吗?

【问题讨论】:

【参考方案1】:

updated hook docs我们看到:

在数据更改导致虚拟 DOM 被重新渲染修补后调用。

当渲染函数中使用的任何实例数据发生变化时,渲染函数将被再次调用。除非必要,否则不会替换 DOM。

在您的示例中,Vue 智能地避免了任何 DOM 更改,但仍会在每次更新时调用 render 函数。所以唯一的开销是 render 函数本身,而不是 DOM 更改。

如果您的渲染函数执行非常昂贵的操作(例如,正在排序、映射、过滤等的巨大数组),那么这可能会导致一些性能问题。例如,如果模板直接调用一个方法:

 ExpensiveSort() 

这是在模板中避免做的事情。

【讨论】:

以上是关于Vue.js - 更新和渲染数组的性能成本的主要内容,如果未能解决你的问题,请参考以下文章

vue.js初级教程--01.简介

Vue.js 警告您可能在组件渲染函数中有无限更新循环

vue.js中条件渲染中的数组子项

Vue.js 重新渲染排序数组

Vue.js高效前端开发 • Vue列表渲染

Vue.js高效前端开发 • Vue列表渲染