购物网站开发设计,深圳网站建设方维,wordpress提醒,宁波cms模板建站v-memo是一个用于优化组件渲染性能的指令。它允许你根据某个条件来缓存组件的虚拟 DOM 树#xff0c;从而在条件没有变化时避免不必要的重新渲染。这对于那些接收大量 props 且渲染成本较高的组件来说非常有用。
用法 v-memo 指令接受一个表达式或一个数组作为参数#xff0…v-memo是一个用于优化组件渲染性能的指令。它允许你根据某个条件来缓存组件的虚拟 DOM 树从而在条件没有变化时避免不必要的重新渲染。这对于那些接收大量 props 且渲染成本较高的组件来说非常有用。
用法 v-memo 指令接受一个表达式或一个数组作为参数这个表达式或数组的值将用于确定是否缓存组件的虚拟 DOM。当这个值没有变化时Vue 将复用之前缓存的虚拟 DOM而不是重新创建它。 div v-memo[valueA, valueB]...
/div
当组件重新渲染如果 valueA 和 valueB 都保持不变这个 div 及其子项的所有更新都将被跳过。实际上甚至虚拟 DOM 的 vnode 创建也将被跳过因为缓存的子树副本可以被重新使用。
正确指定缓存数组很重要否则应该生效的更新可能被跳过。v-memo 传入空依赖数组 (v-memo[]) 将与 v-once 效果相同。
与 v-for 一起使用
v-memo 仅用于性能至上场景中的微小优化应该很少需要。最常见的情况可能是有助于渲染海量 v-for 列表 (长度超过 1000 的情况)
div v-foritem in list :keyitem.id v-memo[item.id selected]pID: {{ item.id }} - selected: {{ item.id selected }}/pp...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 内部。
