vue3从精通到入门6:v-memo指令

v-memo是一个用于优化组件渲染性能的指令。它允许你根据某个条件来缓存组件的虚拟 DOM 树,从而在条件没有变化时避免不必要的重新渲染。这对于那些接收大量 props 且渲染成本较高的组件来说非常有用。

用法

v-memo 指令接受一个表达式或一个数组作为参数,这个表达式或数组的值将用于确定是否缓存组件的虚拟 DOM。当这个值没有变化时,Vue 将复用之前缓存的虚拟 DOM,而不是重新创建它。

html 复制代码
<div v-memo="[valueA, valueB]">
  ...
</div>

当组件重新渲染,如果 valueAvalueB 都保持不变,这个 <div> 及其子项的所有更新都将被跳过。实际上,甚至虚拟 DOM 的 vnode 创建也将被跳过,因为缓存的子树副本可以被重新使用。

正确指定缓存数组很重要,否则应该生效的更新可能被跳过。v-memo 传入空依赖数组 (v-memo="[]") 将与 v-once 效果相同。

v-for 一起使用

v-memo 仅用于性能至上场景中的微小优化,应该很少需要。最常见的情况可能是有助于渲染海量 v-for 列表 (长度超过 1000 的情况):

html 复制代码
<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
  <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
  <p>...more child nodes</p>
</div>

当组件的 selected 状态改变,默认会重新创建大量的 vnode,尽管绝大部分都跟之前是一模一样的。v-memo 用在这里本质上是在说"只有当该项的被选中状态改变时才需要更新"。这使得每个选中状态没有变的项能完全重用之前的 vnode 并跳过差异比较。

如果不在上面的代码中使用 v-memoselected 变量的每一次改变都会导致列表的完全重新渲染。新指令提供的缓存,允许只更新表达式 item.id === selected 发生变化的行,也就是当某个项被选中或者取消时。

注意:这里 memo 依赖数组中并不需要包含 item.id,因为 Vue 也会根据 item 的 :key 进行判断。当搭配 v-for 使用 v-memo,确保两者都绑定在同一个元素上。v-memo 不能用在 v-for 内部。

相关推荐
蜗牛快跑2137 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy8 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
娅娅梨14 分钟前
C++ 错题本--not found for architecture x86_64 问题
开发语言·c++
汤米粥20 分钟前
小皮PHP连接数据库提示could not find driver
开发语言·php
冰淇淋烤布蕾23 分钟前
EasyExcel使用
java·开发语言·excel
拾荒的小海螺29 分钟前
JAVA:探索 EasyExcel 的技术指南
java·开发语言
涔溪1 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
马剑威(威哥爱编程)1 小时前
哇喔!20种单例模式的实现与变异总结
java·开发语言·单例模式
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
白-胖-子1 小时前
【蓝桥等考C++真题】蓝桥杯等级考试C++组第13级L13真题原题(含答案)-统计数字
开发语言·c++·算法·蓝桥杯·等考·13级