總結(jié)2019年3月vue開發(fā)大會Cuillaume Chau發(fā)表的Vue性能優(yōu)化9法
其中包括：
- 函數(shù)型組件
- 子組件拆分
- 局部變量
- 或用v-show 減少v-if
- 使用keep-alive
- 活用延遲加載( Defer )
- 分批處理( Time slicing )
- 非響應(yīng)模式( non-reactive )
- 僅渲染可視化部分
詳細：
- 函數(shù)型組件
Vue.js 組件提供了一個 functional ，設(shè)置后，就可以讓組件變?yōu)闊o狀態(tài)、無實例的函數(shù)化組件。因為只是函數(shù)，所以渲染的開銷相對來說，較小。
<template functional>
<div>{{props.value}}</div>
</template>
<script>
export default {
props:[ 'value' ]
}
</script>
- 子組件拆分
將一些可復(fù)用的組件單獨拆分為一個組件。
- 局部變量
data() {
return {
msg: 0
}
},
computed: {
base() {
return 10
}
},
methods: {
result(){
//這里用一個變量接收下，就不用每次循環(huán)調(diào)用計算屬性的base了，可以提高效率
const base = this.base;
for(let i=0;i<1000000;i++){
this.msg += base
}
}
},
mounted(){
this.result();
}
- 活用v-show，少用v-if
這個就明白多了，v-show是不操作網(wǎng)頁的DOM樹的，所以 v-show要比v-if更快，但是也各有優(yōu)劣
- <keep-alive>
<keep-alive>是Vue的內(nèi)置組件，能在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM。
<keep-alive> 包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀它們。
<keep-alive> 與 <transition>相似，只是一個抽象組件，它不會在DOM樹中渲染(真實或者虛擬都不會)，也不在父組件鏈中存在，比如：你永遠在 this.$parent 中找不到 keep-alive 。
<keep-alive>
<router-view/>
</keep-alive>
- 活用延遲裝載( Defer )
待補充。。。
- 分批處理
待補充。。。
- 非響應(yīng)模式( 非觀察模式, non-reactive )
待補充。。。
- 僅渲染可視化部分
待補充。。。
