新指令 v-memo，提高性能的又一利器

web老猴子

已于 2022-12-13 22:24:18 修改

阅读量1k

点赞数 3

文章标签：策略模式前端 javascript 开发语言 vue.js

于 2022-12-13 15:29:56 首次发布

本文链接：https://blog.csdn.net/web220507/article/details/128302756

版权

本文介绍了Vue3.2的新指令v-memo，用于提高应用程序性能。v-memo通过缓存子树并在依赖值不变时避免不必要的渲染，从而提升效率。文章通过实例详细阐述了v-memo的正确使用方式、如何与v-for结合以及如何管理更新，同时警告了错误使用可能导致的子组件更新阻止问题。最后，作者强调了在适当场景下使用v-memo能显著改善用户体验。

摘要由CSDN通过智能技术生成

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

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

v-memo 是做什么的？

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

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

看起来有点绕，但实际上，很好理解。v-memo 所做的与我们现有的计算属性一样，只不过 v-memo 的对象是 DOM。

这个新指令将缓存它所控制的DOM部分，如果一个特定的值发生变化，只需运行更新并重新渲染。这些值是由我们自己手动设置。

事例

<template><div>..the rest of the component<div v-memo="[myValue]"><svg ><title>{
  {MyValue}}</title>...</svg><vue-custom-element :value="myValue"></vue-custom-element></div></div>
</template>