这个指令是Vue3.2新增的内置指令，大致的作用就是小幅度手动提升一部分性能
官网文档 cn.vuejs.org/api/built-i…
用法
在组件和元素都可以使用，主要是可以缓存 期望的类型是个数组any[]，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么他的更新将会被跳过，甚至虚拟 DOM 的 vnode 创建也将被跳过，提升了性能。
tips：如果v-memo="[]" 传入的是一个空数组，那么他的效果和v-once 一样
<div v-memo="[val]"></div>
配合v-for
配合v-for 属于最常见的情况，但是只有助于大数据量的情况例如（1000条以上）。
tips: 当搭配 v-for 使用 v-memo，确保两者都绑定在同一个元素上。v-memo 不能用在 v-for 内部。
测试代码 未加v-memo 一万条数据
当组件的 selected 状态改变，默认会重新创建大量的 vnode，尽管绝大部分都跟之前是一模一样的。v-memo 用在这里本质上是在说“只有当该项的被选中状态改变时才需要更新”。这使得每个选中状态没有变的项能完全重用之前的 vnode 并跳过差异比较。
<template> <div> <div @click="select(item.id)" :key="item.id" v-for="(item) in arr"> {{ item.id }} - selected： {{ item.id == active }} </div> </div> </template> <script setup lang='ts'> import { ref, reactive } from 'vue' const arr = reactive<any[]>([]) for (let i = 0; i < 10000; i++) { arr.push({ id: i + 1, name: "test" }) } const active = ref(1) const select = async (index: number) => { active.value = index; console.time() await Promise.resolve() console.timeEnd() } </script> <style scoped lang='less'> </style>
添加v-memo 之后 能缩短小部分时间
总结
如果你的项目对性能要求非常严格可以使用，但也只是小部分提升性能，如果你的项目平时没有那么大的数据量，感觉没什么有用。
