這個(gè)系列記錄我在一年vue開(kāi)發(fā)中總結(jié)的一些經(jīng)驗(yàn)和技巧。

利用Object.freeze()提升性能

Object.freeze()是ES5新增的特性，可以凍結(jié)一個(gè)對(duì)象，防止對(duì)象被修改。

vue 1.0.18+對(duì)其提供了支持，對(duì)于data或vuex里使用freeze凍結(jié)了的對(duì)象，vue不會(huì)做getter和setter的轉(zhuǎn)換。

如果你有一個(gè)巨大的數(shù)組或Object，并且確信數(shù)據(jù)不會(huì)修改，使用Object.freeze()可以讓性能大幅提升。在我的實(shí)際開(kāi)發(fā)中，這種提升大約有5~10倍，倍數(shù)隨著數(shù)據(jù)量遞增。

并且，Object.freeze()凍結(jié)的是值，你仍然可以將變量的引用替換掉。舉個(gè)例子：

<p v-for="item in list">{{ item.value }}</p>

new Vue({
 data: {
 // vue不會(huì)對(duì)list里的object做getter、setter綁定
 list: Object.freeze([
  { value: 1 },
  { value: 2 }
 ])
 },
 created () {
 // 界面不會(huì)有響應(yīng)
 this.list[0].value = 100;

 // 下面兩種做法，界面都會(huì)響應(yīng)
 this.list = [
  { value: 100 },
  { value: 200 }
 ];
 this.list = Object.freeze([
  { value: 100 },
  { value: 200 }
 ]);
 }
})

vue的文檔沒(méi)有寫上這個(gè)特性，但這是個(gè)非常實(shí)用的做法，對(duì)于純展示的大數(shù)據(jù)，都可以使用Object.freeze提升性能。

使用 vm.$compile 編譯dom

$compile函數(shù)可以用來(lái)手動(dòng)調(diào)用vue的方式來(lái)編譯dom。在你需要處理某個(gè)jQuery插件生成的html或者服務(wù)端返回的html的時(shí)候，這個(gè)函數(shù)可以派上用場(chǎng)。但注意這是個(gè)私有api，隨時(shí)都有可能變動(dòng)，并且這種做法有違vue的理念。僅在不得已的時(shí)候使用。

new Vue({
 data: {
 value: 'demo'
 },
 created () {
 let dom = document.createElement('div');
 dom.innerHTML = '{{ value }}';
 this.$compile(dom);
 }
})

合理使用track-by="$index"

track-by是vue為循環(huán)提供的優(yōu)化方法，可以復(fù)用多次v-for中id相同的dom。如果你的數(shù)據(jù)沒(méi)有一個(gè)唯一的id，也可以選擇使用track-by="$index"，但必須注意一些副作用。

舉個(gè)例子:

new Vue({
 data: {
 list: [1, 2, 3]
 }
})
<div id="demo-1">
 <p v-for="item in list">{{ item }}</p>
</div>
<div id="demo-2">
 <p v-for="item in list" track-by="$index">{{ item }}</p>
</div>

這時(shí)候執(zhí)行this.list = [4, 5, 6]，可以通過(guò)F12觀察到，demo-1里的dom被全部刪除，然后重新循環(huán)list生成dom，而demo-2不會(huì)刪除dom，只是把他們的text格子修改為4，5，6。這就是track-by="$index"的效果，復(fù)用了兩次v-for中$index相同的dom。

這是一個(gè)很好的優(yōu)化方法，但不是所有場(chǎng)景都適用，比如循環(huán)中包含表單控件或子組件時(shí)，由于dom并不會(huì)被刪除重新生成，會(huì)導(dǎo)致第二次執(zhí)行的v-for，原有表單控件的值不會(huì)改變，可以看這個(gè)例子：https://jsfiddle.net/jysboza9/1/

不要濫用Directive

網(wǎng)上有一種說(shuō)法，認(rèn)為dom操作都應(yīng)該封裝在指令中。實(shí)際開(kāi)發(fā)中，我認(rèn)為并不應(yīng)該遵循這種教條。是否使用指令應(yīng)該看你實(shí)現(xiàn)的是什么功能，而不是看是否操作了dom。比如說(shuō)你想用vue封裝一個(gè)jQuery插件，來(lái)看看下面哪種封裝方法比較好：

<!-- component -->
<datepicker></datepicker>
<!-- directive -->
<div v-datepicker="{options}"></div>

個(gè)人認(rèn)為無(wú)疑是第一種方法更好，datepicker是一個(gè)獨(dú)立的組件，你并不需要關(guān)心他的內(nèi)部是否操作了dom，是否封裝了jQuery插件。

那么什么時(shí)候使用指令呢？來(lái)看一下瀏覽器原生提供的指令：

<a title="這是一個(gè)指令"></a>
<p title="這是一個(gè)指令"></p>
<div title="這是一個(gè)指令"></div>

title屬性為不同的標(biāo)簽提供tooltip功能，這就是一個(gè)指令。一個(gè)指令應(yīng)該表示一個(gè)獨(dú)立的功能，可以為不同的標(biāo)簽和組件提供相同的功能。

未完待續(xù)……

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論