Vue3.2 新增 v-memo

这个指令是​​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 之后 ​​能缩短小部分时间​​

总结

如果你的项目对性能要求非常严格可以使用，但也只是小部分提升性能，如果你的项目平时没有那么大的数据量，感觉没什么有用。