如何通过v-memo缓存模板子树来显著提升应用性能？

本文共计1747个文字，预计阅读时间需要7分钟。

目录+引言+v-memo+是做什么的？+实例+错误的用法+管理更新+与v-for结合使用+无意中停止了子组件触发的更新+总结+引言+Vue3+为我们提供了几项开箱即用的重大性能改进，但也引入了...

目录

• 引言
• v-memo 是做什么的？
• 事例
• 错误的使用方式
• 管理更新
• 与 v-for 结合使用
• 无意中停止了子组件触发的更新
• 总结

引言

Vue3 为我们提供了几项开箱即用的重大性能改进，但也引入了一些额外的手动功能，可以帮助提高我们的应用性能。

在这节课中，我们介绍一下，在 Vue 3.2 中引入新指令 v-memo。引入这个指令的目的是帮助我们提高中型/大型 Vue 应用程序的性能，小项目大家根据需要自行决定。

v-memo 是做什么的？

官网对 v-memo 定义是这样的：

缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过。举例来说：

看起来有点绕，但实际上，很好理解。