Vue3使用 v-memo 指令优化渲染

概要

从 Vue 3.2 开始添加了v-memo指令，v-memo指令可以通过省略不必要的重新渲染来提高性能。

v-memo如果指定的所有值都与上次渲染的结果相同，该指令将跳过重新渲染整个子树。

如何使用v-memo 指令

如下图，重新渲染组件时，如果数组中指定的valueA和valueB与上次渲染的值相同，则跳过div下元素的重新渲染。

<div v-memo="[valueA, valueB]">
  如果值未更改，就不重新渲染
</div>

测试一下

我们可以创建两个组件ChildA.vue 和 ChildB.vue 并在onUpdated()的时候打印日志。

ChildA.vue

// src/components/ChildA.vue
<script setup l

付费内容，0.11币解锁全文 >>

Vue3 小问答

Vue3 小问答，每天一个问答，你来问我来答

收录 16 篇文章

订阅专栏可永久解锁本文 >>

vue3指令

Hedy

大家好！我是一位前端开发工程师，拥有6年以上的前端开发经验。我熟练掌握HTML、CSS、JavaScript等语言，能够灵活运用各种前端框架，如Vue、React、Uniapp、Flutter等。我注重理论与实践相结合，能够为学员提供丰富的案例和实践项目，并以生动、易懂的语言为学员讲解前端开发的核心知识和技能。我不仅注重传授技能，更关注学员的职业发展，希望通过我的教学，帮助学员成为一名优秀的前端开发工程师。