Vue内置指令v-once、v-memo和v-pre提升性能？

前言

Vue的内置指令估计大家都用过不少，例如v-for、v-if之类的就是最常用的内置指令，但今天给大家介绍几个平时用的比较少的内置指令。毕竟这几个Vue内置指令可用可不用，不用的时候系统正常跑，但在对的地方用了却能提升系统性能，下面将结合示例进行详细说明。

一、v-once

作用：在标签上使用v-once能使元素或者表达式只渲染一次。首次渲染之后，后面数据再发生变化时使用了v-once的地方都不会更新，因此用在数据不需要变化的地方就能进行性能优化。

v-once指令实现原理： Vue组件初始化时会标记上v-once，首次渲染会正常执行，后续再次渲染时如果看到有v-once标记则跳过二次渲染。

示例代码： 直接作用在标签上，可以是普通标签也可以是图片标签，当2S后数据变化时标签上的值不会重新渲染更新。

<template>
  <div>
    <span v-once>{{ message }}</span>
    <img v-once :src="imageUrl"></img>
  </div>
</template>

<script setup>
import { ref } from 'vue';

let message = ref('Vue指令!');
let imageSrc = ref('/path/my/image.jpg');

setTimeout(() => {
  message.value = '修改内容!';
  imageUrl.value = '/new/path/my/images.jpg';
}, 2000);

</script>

注意： 作用v-once会使属性失去响应式，要确保这个地方不需要响应式更新才能使用，否则会导致数据和页面视图对不上。

二、v-pre

作用： 在标签上使用v-pre后，Vue编译器会自动跳过这个元素的编译。使用此内置指令后会被视为静态内容。

v-pre指令实现原理： Vue初次编译时如果看到有v-pre标记，那么跳过这部分的编译，直接当成原始的HTML插入到DOM中。

示例代码： 常规文本会正常编译成您好！，但使用了v-pre后会跳过编译原样输出{{ message }}。

<template>
  <div>
    <h2>常规: {{ message }}</h2>
    <h2 v-pre>使用v-pre后: {{ message }}</h2>
  </div>
</template>

<script setup>
import { ref } from 'vue';

let message = ref('您好!');
</script>

注意： 要区分v-pre和v-once的区别，v-once用于只渲染一次，而v-pre是直接跳过编译。

这个指令可能很多人没想到应用场景有那些，其实最常见的用途就是要在页面上显示Vue代码，如果不用v-pre就会被编译。如下所示使用v-pre场景效果。

<template>
  <div>
    <pre v-pre>
      &lt;template&gt;
        &lt;p&gt;{{ message }}&lt;/p&gt;
      &lt;/template&gt;

      &lt;script setup&gt;
      import { ref } from 'vue';

      const message = ref('Hello Vue!');
      &lt;/script&gt;
    </pre>
  </div>
</template>

<script setup>
import { ref } from 'vue';

let message = ref('您好!');
</script>

页面上展示： 代码原始显示不会被编译。

三、v-memo（支持3.2+版本）

作用： 主要用于优化组件的渲染方面性能，能控制达到某个条件才重新当堂组件，否则不重新渲染。v-memo 会缓存 DOM，只有当指定的数据发生变化时才会重新渲染，从而减少渲染次数提升性能。

v-memo 指令实现原理： Vue初始化组件时会识别是否有v-memo标记，如果有就把这部分vnode缓存起来，当数据变化时会对比依赖是否变化，变化再重新渲染。

示例代码： 用v-memo 绑定了arr，那么当arr的值变化才会重新渲染，否则不会重新渲染。

<template>
  <div>
    <ul v-memo="arr">
      <li v-for="(item, index) in arr" :key="index">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

let arr = ref([
  { text: '内容1' },
  { text: '内容2' },
  { text: '内容3' }
]);

setInterval(() => {
  arr.value[1].text = '修改2';
}, 2000);
</script>

注意： 用v-memo来指定触发渲染的条件，但只建议在长列表或者说复杂的渲染结构才使用。