減少組件的渲染次數(shù)，能提升 Vue App 的運(yùn)行時(shí)性能边灭。通過寫法的優(yōu)化健盒，可以減少不必要的組件渲染次數(shù)称簿。
優(yōu)化寫法
1. 緩存動(dòng)態(tài)組件
開發(fā)中惰帽，我們會(huì)碰到用動(dòng)態(tài)組件的情況。如多標(biāo)簽的頁面授药，每個(gè)標(biāo)簽的內(nèi)容是個(gè)動(dòng)態(tài)組件:
<component v-bind:is="currentTabComponent"></component>
標(biāo)簽來回切換呜魄，同一個(gè)組件會(huì)被重復(fù)渲染。用 keep-alive 包裹動(dòng)態(tài)組件骄蝇，可以緩存組件的渲染結(jié)果操骡，保證同一個(gè)組件只被渲染一次。優(yōu)化寫法如下:
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
2. 合理使用 v-if岔激，v-show
v-if 有更高的切換開銷是掰。v-show 有更高的初始渲染開銷，其值變化時(shí)键痛，內(nèi)容并不會(huì)重新渲染絮短。因此，如果需要非常頻繁地切換丁频，則使用 v-show 較好；如果在運(yùn)行時(shí)條件很少改變叔磷，則使用 v-if 較好奖磁。
3. 插槽(Slot) 改成新的寫法
插槽的數(shù)據(jù)發(fā)生改變時(shí)，舊的插槽寫法寥裂，會(huì)導(dǎo)致插槽父組件的更新，插槽組件也就更新了封恰。新的插槽寫法只會(huì)更新插槽組件，少了更新父組件這過程诺舔。
舊的插槽寫法:
<!-- 默認(rèn)作用域插槽 (default scoped slot) -->
<my-component>
<template slot-scope="{ msg }">
{{ msg }}
</template>
</my-component>
<!-- 具名插槽 (named slots) -->
<my-component2>
<template slot="header">
<p>Header</p>
</template>
<template slot="item" slot-scope="data">
<h2>{{ data.title }}</h2>
<p>{{ data.text }}</p>
</template>
</my-component2>
Vue 2.6 加了新的插槽寫法: v-slot低飒。如下:
<!-- 默認(rèn)作用域插槽 (default scoped slot) -->
<my-component v-slot="{ msg }">
{{ msg }}
</my-component>
<!-- 具名插槽 (named slots) -->
<my-component2>
<template v-slot:header>
<p>Header</p>
</template>
<template v-slot:item="{ data }">
<h2>{{ data.title }}</h2>
<p>{{ data.text }}</p>
</template>
</my-component2>
了解更多插槽新寫法的內(nèi)容，見 Vue 2.6 發(fā)布了糕档。
