v-memo的讲解
vue3.2中新增了一个性能优化的指令；
这个指令就是v-memo;
v-memo:可以做性能优化，v-memo中值若不发生变化，整个子树的更新会被跳过。
<div v-memo="[valueA, valueB]">
...
</div>
当组件重新渲染的时候，如果 valueA 与 valueB 都维持不变。
那么对这个 <div> 以及它的所有子节点的更新都将被跳过。
事实上，即使是虚拟 DOM 的 VNode 创建也将被跳过，因为子树的记忆副本可以被重用。
这样一来，性能将会显著提升。
场景描述
假设后端返回来了10000条数据。
前端需要做筛选。
选出符合条件的数据进行展示。
如果没有符合条件的。则保持上次的搜索结果。
v-memo的使用
<template>
<div class="home">
<input type="text" v-model="jiaoSheng">
<!-- v-memo中值若不发生变化，则不会进行更新 -->
<ul v-memo="[shouldUpdate]">
<li class="licss" v-for="item in arr" :key="item">
{{ jiaoSheng }} -- {{ animalType[jiaoSheng] }}
</li>
</ul>
</div>
</template>
<script lang="ts" setup>
import { ref } from "@vue/reactivity"
import { watch } from "@vue/runtime-core"
const arr=new Array(10000)
const animalType={
'mie':'🐏',
'mo':'🐂',
'miao':'🐱',
}
const jiaoSheng=ref('mie')
const shouldUpdate=ref(0)
// 监听jiaoSheng(输入框中的值)。
// 如果数据发生变化，并且在animalType对象中存在。试图进行更新。否则试图不进行更新。
watch(()=>jiaoSheng.value,()=>{
if(Object.keys(animalType).includes(jiaoSheng.value)){
shouldUpdate.value++
}
})
</script>
总结
到此这篇关于vue3.2新增指令v-memo基本使用的文章就介绍到这了,更多相关vue3.2新增指令v-memo内容请搜索阿兔在线工具以前的文章或继续浏览下面的相关文章希望大家以后多多支持阿兔在线工具！
