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 内部。

相关推荐
訾博ZiBo几秒前
React组件复用导致的闪烁问题及通用解决方案
前端
Dever2 分钟前
记一次 CORS 深水坑:开启 withCredentials 后Response headers 只剩 content-type
前端·javascript
暴力求解4 分钟前
c++类和对象(下)
开发语言·c++·算法
临江仙4554 分钟前
流式 Markdown 渲染在 AI 应用中的应用探秘:从原理到优雅实现
前端·vue.js
数字化顾问12 分钟前
基于Spring Boot + Vue 3的乡村振兴综合服务平台架构设计与实现
vue.js·spring boot·后端
Hilaku16 分钟前
为什么我开始减少逛技术社区,而是去读非技术的书?
前端·javascript·面试
应用市场19 分钟前
Qt插件机制实现动态组件加载详解
开发语言·qt
小秋学嵌入式-不读研版20 分钟前
C65-枚举类型
c语言·开发语言·笔记
m0_7280331331 分钟前
JavaWeb——(web.xml)中的(url-pattern)
xml·前端
猪哥帅过吴彦祖34 分钟前
第 8 篇:更广阔的世界 - 加载 3D 模型
前端·javascript·webgl