您的位置:首页 > Web前端 > Vue.js

vue3.2新增指令v-memo的使用

2022-06-05 18:07 3387 查看

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>

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: