使用 V-once 和 V-memo 指令來(lái)優(yōu)化 Vue 應(yīng)用程序的性能可以降低應(yīng)用程序的運(yùn)行成本并提高用戶體驗(yàn)。在 Vue 3.2 的 <script setup> 中，我們可以在計(jì)算屬性和組件方法中使用這些指令，以簡(jiǎn)化應(yīng)用程序的代碼和優(yōu)化應(yīng)用程序的性能。
從 Vue 3.2 版本開(kāi)始，可以在 <script setup> 中使用 v-once 和 v-memo 指令，以優(yōu)化 Vue 應(yīng)用程序的性能。
v-once 指令
v-once 指令在 <script setup> 中使用的方式與在模板中使用一致?？梢栽谒柙厣咸砑?v-once 指令，以確保只在首次渲染時(shí)進(jìn)行綁定，并在之后的更新周期中跳過(guò)它們。這可以減少應(yīng)用程序的內(nèi)存和 CPU 開(kāi)銷。
v-once 指令僅渲染元素/組件一次。初始渲染后，該元素及其所有子元素將被視為靜態(tài)內(nèi)容。
例如：
<!-- 單個(gè)元素 -->
<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>
當(dāng)與 v-if 或 v-show 一起使用時(shí)，一旦我們的元素被渲染一次，v-if 或 v-show 將不再適用，這意味著如果它在第一次渲染時(shí)可見(jiàn)，它將始終可見(jiàn)。如果它是隱藏的，它將永遠(yuǎn)是隱藏的。
<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 標(biāo)簽將始終可見(jiàn)。
常規(guī)例如：
<template>
<div>
<span v-once>這個(gè)文本永遠(yuǎn)不會(huì)改變:</span>{{ message }}
</div>
</template>
<script setup>
const message = ref("Hello, world!");
</script>
v-memo 指令
v-memo 指令允許在計(jì)算屬性或組件方法中緩存計(jì)算結(jié)果的副本，避免不必要的計(jì)算。只有在指定的屬性值更改時(shí)才會(huì)重新計(jì)算方法或計(jì)算屬性的值，并更新界面。
v-memo 是 Vue 3.2 新增的一個(gè)指令。它接受一個(gè)依賴數(shù)組，并且只有在數(shù)組中的一個(gè)值發(fā)生變化時(shí)才會(huì)重新渲染。
例如：
<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>
如果傳入一個(gè)空的依賴項(xiàng)數(shù)組，它將與使用 v-once 相同，它永遠(yuǎn)不會(huì)重新渲染。
<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 循環(huán)中不起作用，所以如果我們想用 v-for 記憶一些東西，我們必須把它們放在同一個(gè)元素上。
常規(guī)例如：
<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("計(jì)算結(jié)果...", item);
return item * 10;
});
});
</script>
注意：
v-once 和 v-memo 指令只能在 <script setup> 中使用，不能在 <template> 中使用。此外，在使用 v-once 和 v-memo 指令時(shí)，同樣需要考慮其適用場(chǎng)景和使用方式，以充分發(fā)揮它們的優(yōu)勢(shì)。
總結(jié)：
使用 v-once 和 v-memo 指令來(lái)優(yōu)化 Vue 應(yīng)用程序的性能可以降低應(yīng)用程序的運(yùn)行成本并提高用戶體驗(yàn)。在 Vue 3.2 的 <script setup> 中，我們可以在計(jì)算屬性和組件方法中使用這些指令，以簡(jiǎn)化應(yīng)用程序的代碼和優(yōu)化應(yīng)用程序的性能。
