vue的指令有什么作用（vue3.2新增指令v-memo的基本使用教程）
时间2025-08-04 17:59:54分类IT科技浏览4696
导读：v-memo的讲解 vue3.2中新增了一个性能优化的指令；...
v-memo的讲解
vue3.2中新增了一个性能优化的指令；
这个指令就是v-memo;
v-memo:可以做性能优化 ，v-memo中值若不发生变化 ，整个子树的更新会被跳过 。
...
当组件重新渲染的时候 ，如果 valueA 与 valueB 都维持不变 。
那么对这个
以及它的所有子节点的更新都将被跳过 。
事实上 ，即使是虚拟 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内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！
