Vue3.2 新增指令 v-memo 用法详解(提高性能利器)
哈喽,大家好 我是
xy👨🏻💻。不少同学可能没有发现,Vue3.2新增了一个指令v-memo, 引入这个指令的目的是帮助大家更好的为我们的应用做性能优化💪
v-memo 官方定义
「📚 期望的绑定值类型：」
any[]「📚 详细信息」
缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过。举例来说：
<div v-memo="[valueA, valueB]">
...
</div>当组件重新渲染，如果 valueA 和 valueB 都保持不变，这个 <div> 及其子项的所有更新都将被跳过。实际上，甚至虚拟 DOM 的 vnode 创建也将被跳过，因为缓存的子树副本可以被重新使用。
正确指定缓存数组很重要，否则应该生效的更新可能被跳过。v-memo 传入空依赖数组 (v-memo="[]") 将与 v-once 效果相同。
我对 v-memo 的理解
简单理解：v-memo 接受一个依赖的数组，依赖的数组变化，v-memo 所对应的 DOM 包括子集将会重新渲染，反过来说，如果依赖的数组不变，即使整组件重新渲染了，v-memo 所对应的 DOM 包括子集更新都将被跳过
另外，依赖的数组接受一个或多个值 v-memo="[valueOne, valueTwo]"，也接受像 v-memo="myValue === true"这样的表达式。
如果用一个空数组调用 v-memo 相当于使用 v-once，只会渲染该部分组件一次。
与v-for 一起使用
v-memo 仅用于性能至上场景中的微小优化，应该很少需要。最常见的情况可能是有助于渲染海量 v-for 列表 (长度超过 1000 的情况)：
<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
<p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
<p>...more child nodes</p>
</div>当组件的 selected 状态改变，默认会重新创建大量的 vnode，尽管绝大部分都跟之前是一模一样的。v-memo 用在这里本质上是在说“只有当该项的被选中状态改变时才需要更新”。这使得每个选中状态没有变的项能完全重用之前的 vnode 并跳过差异比较。注意这里 memo 依赖数组中并不需要包含 item.id，因为 Vue 也会根据 item 的 :key 进行判断。
使用场景
假设后端返回来了 10000 条数据， 前端需要做筛选， 选出符合条件的数据进行展示， 如果没有符合条件的，则保持上次的搜索结果。
<template>
<div class="home">
<input type="text" v-model="value">
<!-- v-memo中值若不发生变化，则不会进行更新 -->
<ul v-memo="[shouldUpdate]">
<li class="licss" v-for="item in arr" :key="item">
{{ value }} -- {{ animalType[value] }}
</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 value=ref('mie')
const shouldUpdate=ref(0)
// 监听value(输入框中的值)。
// 如果数据发生变化，并且在animalType对象中存在。试图进行更新。否则试图不进行更新。
watch(()=>value.value,()=>{
if(Object.keys(animalType).includes(value.value)){
shouldUpdate.value++
}
})
</script>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':'到此这篇关于Vue3.2 新增指令 v-memo 用法详解，提高性能的又一利器！！！的文章就介绍到这了,更多相关Vue3.2 v-memo指令内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了vue基于electron构建第一个程序过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了vue3中的ref和reactive定义数组方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本文主要介绍了Vue3+Vite使用双token实现无感刷新，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了vue中的axios配置及接口请求路径api配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
router-view组件作为vue最核心的路由管理组件，在项目中作为路由管理经常被使用到，所以下面小编就来和大家详细聊聊router-view组件的具体使用方法，希望对大家有所帮助2023-06-06
这篇文章主要介绍了解决Vue @submit 提交后不刷新页面问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了前端vue打包项目，如何解决跨域问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了vue 按钮 权限控制，在日常项目中，会碰到需要根据后台接口返回的数据，来判断当前用户的操作权限，必须当有删除权限时，就显示删除按钮，下面我们就来了解一下具体的解决方法,需要的朋友也可以参考一下2021-12-12
这篇文章主要介绍了vue-cli3搭建项目的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
今天小编就为大家分享一篇vue 点击按钮增加一行的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论