哈喽,咱们好 我是xy‍。不少同学或许没有发现, Vue3.2 新增了一个指令 v-memo, 引入这个指令的目的是帮助咱们更好的为咱们的应用做功能优化

v-memo 官方定义

  • 「 希望的绑定值类型：」any[]

  • 「 详细信息」

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

<divv-memo="[valueA,valueB]">
...
</div>

当组件从头烘托，假如 valueA 和 valueB 都坚持不变，这个 <div> 及其子项的一切更新都将被越过。实际上，乃至虚拟 DOM 的 vnode 创立也将被越过，因为缓存的子树副本可以被从头运用。

正确指定缓存数组很重要，不然应该收效的更新或许被越过。v-memo 传入空依靠数组 (v-memo="[]") 将与 v-once 作用相同。

我对 v-memo 的理解

简单理解：v-memo 接受一个依靠的数组，依靠的数组改动，v-memo 所对应的 DOM 包括子集将会从头烘托，反过来说，假如依靠的数组不变，即便整组件从头烘托了，v-memo 所对应的 DOM 包括子集更新都将被越过

别的，依靠的数组接受一个或多个值 v-memo="[valueOne, valueTwo]"，也接受像 v-memo="myValue === true"这样的表达式。

假如用一个空数组调用 v-memo 相当于运用 v-once，只会烘托该部分组件一次。

与 v-for 一起运用

v-memo 仅用于功能至上场景中的微小优化，应该很少需求。最常见的状况或许是有助于烘托海量 v-for 列表 (长度超越 1000 的状况)：

<divv-for="iteminlist":key="item.id"v-memo="[item.id===selected]">
<p>ID:{{item.id}}-selected:{{item.id===selected}}</p>
<p>...morechildnodes</p>
</div>

当组件的 selected 状况改动，默许会从头创立很多的 vnode，虽然绝大部分都跟之前是如出一辙的。v-memo 用在这里本质上是在说“只有当该项的被选中状况改动时才需求更新”。这使得每个选中状况没有变的项能彻底重用之前的 vnode 并越过差异比较。注意这里 memo 依靠数组中并不需求包括 item.id，因为 Vue 也会依据 item 的 :key 进行判别。

运用场景

假设后端返回来了 10000 条数据， 前端需求做筛选， 选出契合条件的数据进行展示， 假如没有契合条件的，则坚持上次的查找成果。

<template>
<divclass="home">
<inputtype="text"v-model="value">
<!--v-memo中值若不发生改动，则不会进行更新-->
<ulv-memo="[shouldUpdate]">
<liclass="licss"v-for="iteminarr":key="item">
{{value}}--{{animalType[value]}}
</li>
</ul>
</div>
</template>
<scriptlang="ts"setup>
import{ref}from"@vue/reactivity"
import{watch}from"@vue/runtime-core"
constarr=newArray(10000)
constanimalType={
'mie':'',
'mo':'',
'miao':'',
}
constvalue=ref('mie')
constshouldUpdate=ref(0)
//监听value(输入框中的值)。
//假如数据发生改动，并且在animalType目标中存在。企图进行更新。不然企图不进行更新。
watch(()=>value.value,()=>{
if(Object.keys(animalType).includes(value.value)){
shouldUpdate.value++
}
})
</script>

写在最终

大众号：前端开发喜好者 专注共享 web 前端相关技术文章、视频教程资源、热门资讯等，假如喜欢我的共享，给 点一个赞 或者 ➕重视 都是对我最大的支撑。

咱们好，我xy,是一名前端 喜好：瞎折腾

假如你也是一名瞎折腾的前端欢迎加我微信交流哦…

一定要点我