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