vue3.2新增指令v-memo的基本使用教程
更新时间：2022年09月30日 13:19:59 作者：南风晚来晚相识
ue3.2新增了一个指令v-memo,引入这个指令的目的是帮助大家更好的为我们的应用做性能优化,下面这篇文章主要给大家介绍了关于vue3.2新增指令v-memo基本使用的相关资料,需要的朋友可以参考下
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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
当我们谈论Vue的组件扩展时,经常会遇到mixin和extends这两个关键词,它们提供了一种有效的方式来共享和重用组件逻辑,本文将深入探讨Vue中mixin和extends的使用方法,并详细探讨它们的覆盖逻辑,以便你在实际项目中能够更好地应用它们2023-08-08
今天小编就为大家分享一篇关于vue中子组件传递数据给父组件的讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要为大家介绍了vue选项卡Tabs组件实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
在浏览器上下滚动的时候,如何距离顶部的距离大于78px,吸顶显示,小于78px则隐藏,所以本文小编给大家介绍了Vue设置导航吸顶的详细教程,文中有相关的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vuejs中父子组件之间通信方法,结合实例形式详细分析了vue.js父组件向子组件传递消息以及子组件向父组件传递消息具体操作实现技巧,需要的朋友可以参考下2020-01-01
Vue是一套用于构建用户界面的渐进式框架,下面这篇文章主要给大家介绍了关于Vue语法和标签使用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了在vue中使用setInterval的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
vue+element下日期组件momentjs转换赋值问题解决
这篇文章主要介绍了vue+element下日期组件momentjs转换赋值问题,记录下使用momentjs转换日期字符串赋值给element的日期组件报错问题，需要的朋友可以参考下2024-02-02
Vue3动态组件怎么进行异常处理？下面本篇文章带大家聊聊Vue3 动态组件异常处理的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-02-02
这篇文章主要介绍了vue点击页面空白处实现保存功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-11-11
最新评论