Vue 3.2中新添加的v-memo指令用法指南
最编程
2024-02-22 08:19:18
...
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>
下一篇: 在电脑上使用支付宝进行扫码付款操作指南