這個系列記錄我在一年vue開發中總結的一些經驗和技巧。
利用Object.freeze()提升性能
Object.freeze()是ES5新增的特性，可以凍結一個對象，防止對象被修改。
vue 1.0.18+對其提供了支持，對於data或vuex裡使用freeze凍結了的對象，vue不會做getter和setter的轉換。
如果你有一個巨大的數組或Object，並且確信數據不會修改，使用Object.freeze()可以讓性能大幅提升。在我的實際開發中，這種提升大約有5~10倍，倍數隨著數據量遞增。
並且，Object.freeze()凍結的是值，你仍然可以將變量的引用替換掉。舉個例子：
<p v-for="item in list">{{ item.value }}</p>
new Vue({
data: {
// vue不會對list裡的object做getter、setter綁定
list: Object.freeze([
{ value: 1 },
{ value: 2 }
])
},
created () {
// 界面不會有響應
this.list[0].value = 100;
// 下面兩種做法，界面都會響應
this.list = [
{ value: 100 },
{ value: 200 }
];
this.list = Object.freeze([
{ value: 100 },
{ value: 200 }
]);
}
})
vue的文檔沒有寫上這個特性，但這是個非常實用的做法，對於純展示的大數據，都可以使用Object.freeze提升性能。
使用 vm.$compile 編譯dom
$compile函數可以用來手動調用vue的方式來編譯dom。在你需要處理某個jQuery插件生成的html或者服務端返回的html的時候，這個函數可以派上用場。但注意這是個私有api，隨時都有可能變動，並且這種做法有違vue的理念。僅在不得已的時候使用。
new Vue({
data: {
value: 'demo'
},
created () {
let dom = document.createElement('div');
dom.innerHTML = '{{ value }}';
this.$compile(dom);
}
})
合理使用track-by="$index"
track-by是vue為循環提供的優化方法，可以復用多次v-for中id相同的dom。如果你的數據沒有一個唯一的id，也可以選擇使用track-by="$index"，但必須注意一些副作用。
舉個例子:
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>
這時候執行this.list = [4, 5, 6]，可以通過F12觀察到，demo-1裡的dom被全部刪除，然後重新循環list生成dom，而demo-2不會刪除dom，只是把他們的text格子修改為4，5，6。這就是track-by="$index"的效果，復用了兩次v-for中$index相同的dom。
這是一個很好的優化方法，但不是所有場景都適用，比如循環中包含表單控件或子組件時，由於dom並不會被刪除重新生成，會導致第二次執行的v-for，原有表單控件的值不會改變，可以看這個例子：https://jsfiddle.net/jysboza9/1/
不要濫用Directive
網上有一種說法，認為dom操作都應該封裝在指令中。實際開發中，我認為並不應該遵循這種教條。是否使用指令應該看你實現的是什麼功能，而不是看是否操作了dom。比如說你想用vue封裝一個jQuery插件，來看看下面哪種封裝方法比較好：
<!-- component -->
<datepicker></datepicker>
<!-- directive -->
<div v-datepicker="{options}"></div>
個人認為無疑是第一種方法更好，datepicker是一個獨立的組件，你並不需要關心他的內部是否操作了dom，是否封裝了jQuery插件。
那麼什麼時候使用指令呢？來看一下浏覽器原生提供的指令：
<a title="這是一個指令"></a> <p title="這是一個指令"></p> <div title="這是一個指令"></div>
title屬性為不同的標簽提供tooltip功能，這就是一個指令。一個指令應該表示一個獨立的功能，可以為不同的標簽和組件提供相同的功能。
未完待續……
本文已被整理到了《Vue.js前端組件學習教程》，歡迎大家學習閱讀。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。