vue3.2中使用 v-once 和 v-memo 指令如何来提升性能

从 Vue 3.2 版本开始，可以在 <script setup> 中使用 v-once 和 v-memo 指令，以优化 Vue 应用程序的性能。

v-once 指令

v-once 指令在 <script setup> 中使用的方式与在模板中使用一致。可以在所需元素上添加 v-once 指令，以确保只在首次渲染时进行绑定，并在之后的更新周期中跳过它们。这可以减少应用程序的内存和 CPU 开销。

v-once 指令仅渲染元素/组件一次。初始渲染后，该元素及其所有子元素将被视为静态内容。

例如：

<!-- 单个元素 -->
<span v-once>{{ msg }}</span>
<!-- 有子元素的元素 -->
<div v-once>
  <p>{{ msg }}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令 -->
<ul>
  <li v-for="i in list" v-once>{{ i }}</li>
</ul>           

当与 v-if 或 v-show 一起使用时，一旦我们的元素被渲染一次，v-if 或 v-show 将不再适用，这意味着如果它在第一次渲染时可见，它将始终可见。如果它是隐藏的，它将永远是隐藏的。

<template>
  <p v-once v-if="show">{{ msg }}</p>
  <el-button @click="show = !show">切换</el-button>
</template>

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

  const msg = ref('Hello')
  const show = ref(true)
</script>           

以上 p 标签将始终可见。

常规例如：

<template>
  <div>
    <span v-once>这个文本永远不会改变:</span>{{ message }}
  </div>
</template>

<script setup>
const message = ref("Hello, world!");
</script>           

v-memo 指令

v-memo 指令允许在计算属性或组件方法中缓存计算结果的副本，避免不必要的计算。只有在指定的属性值更改时才会重新计算方法或计算属性的值，并更新界面。

v-memo 是 Vue 3.2 新增的一个指令。它接受一个依赖数组，并且只有在数组中的一个值发生变化时才会重新渲染。

例如：

<template>
  <p v-memo="[msg]">{{ msg }}</p>
  <el-button @click="msg = 'change msg'">切换</el-button>
</template>

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

  const msg = ref('hello')
</script>           

如果传入一个空的依赖项数组，它将与使用 v-once 相同，它永远不会重新渲染。

<template>
  <p v-memo="[]">{{ msg }}</p>
  <!-- 等同于  -->
  <p v-once>{{ msg }}</p>

  <el-button @click="msg = 'change msg'">切换</el-button>
</template>

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

  const msg = ref('hello')
</script>           

注意，v-memo 在 v-for 循环中不起作用，所以如果我们想用 v-for 记忆一些东西，我们必须把它们放在同一个元素上。

常规例如：

<template>
  <div>
    <p>{{ message }}</p>
    <ul>
      <li v-for="(item, index) in memoizedList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

const memoizedList = computed(() => {
  return list.value.map((item) => {
    console.log("计算结果...", item);
    return item * 10;
  });
});
</script>           

注意：

v-once 和 v-memo 指令只能在 <script setup> 中使用，不能在 <template> 中使用。此外，在使用 v-once 和 v-memo 指令时，同样需要考虑其适用场景和使用方式，以充分发挥它们的优势。

总结：

使用 v-once 和 v-memo 指令来优化 Vue 应用程序的性能可以降低应用程序的运行成本并提高用户体验。在 Vue 3.2 的 <script setup> 中，我们可以在计算属性和组件方法中使用这些指令，以简化应用程序的代码和优化应用程序的性能。