v-memo是一个用于优化组件渲染性能的指令。它允许你根据某个条件来缓存组件的虚拟 DOM 树,从而在条件没有变化时避免不必要的重新渲染。这对于那些接收大量 props 且渲染成本较高的组件来说非常有用。
用法
v-memo
指令接受一个表达式或一个数组作为参数,这个表达式或数组的值将用于确定是否缓存组件的虚拟 DOM。当这个值没有变化时,Vue 将复用之前缓存的虚拟 DOM,而不是重新创建它。
html
<div v-memo="[valueA, valueB]">
...
</div>
当组件重新渲染,如果 valueA
和 valueB
都保持不变,这个 <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-memo
,selected
变量的每一次改变都会导致列表的完全重新渲染。新指令提供的缓存,允许只更新表达式 item.id === selected
发生变化的行,也就是当某个项被选中或者取消时。
注意:这里 memo 依赖数组中并不需要包含
item.id
,因为 Vue 也会根据 item 的:key
进行判断。当搭配v-for
使用v-memo
,确保两者都绑定在同一个元素上。v-memo
不能用在v-for
内部。