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