本文已整理到 Github鲁森，地址 ?? blog植捎。
如果我的內(nèi)容幫助到了您芽狗，歡迎點個 Star ?????? 鼓勵鼓勵 :) ~~
我希望我的內(nèi)容可以幫助你±鹜祝現(xiàn)在我專注于前端領(lǐng)域咸这，但我也將分享我在有限的時間內(nèi)看到和感受到的東西夷恍。
優(yōu)化渲染的一種極其簡單的方法是僅重新渲染所需要的內(nèi)容。
每當(dāng)組件的數(shù)據(jù)發(fā)生更改時媳维，該組件及其子組件將重新渲染酿雪，Vue 中的 v-once 和 v-memo 指令可以減少這種不必要的渲染遏暴。
v-once
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>
當(dāng)與 v-if 或 v-show 一起使用時，一旦我們的元素被渲染一次醋安，v-if 或 v-show 將不再適用杂彭，這意味著如果它在第一次渲染時可見，它將始終可見吓揪。如果它是隱藏的亲怠，它將永遠(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)簽將始終可見柠辞。
v-memo
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 相同，它永遠(yuǎn)不會重新渲染放棒。
<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ān)內(nèi)容可以查看 Built-in Directives。
