資訊專欄INFORMATION COLUMN
摘要：原文這個(gè)系列記錄我在一年開發(fā)中總結(jié)的一些經(jīng)驗(yàn)和技巧。利用提升性能是新增的特性，可以凍結(jié)一個(gè)對象，防止對象被修改。僅在不得已的時(shí)候使用。一個(gè)指令應(yīng)該表示一個(gè)獨(dú)立的功能，可以為不同的標(biāo)簽和組件提供相同的功能。
原文： https://github.com/Coffcer/Bl...
這個(gè)系列記錄我在一年vue開發(fā)中總結(jié)的一些經(jīng)驗(yàn)和技巧。
利用Object.freeze()提升性能Object.freeze()是ES5新增的特性，可以凍結(jié)一個(gè)對象，防止對象被修改。
vue 1.0.18+對其提供了支持，對于data或vuex里使用freeze凍結(jié)了的對象，vue不會(huì)做getter和setter的轉(zhuǎn)換。
如果你有一個(gè)巨大的數(shù)組或Object，并且確信數(shù)據(jù)不會(huì)修改，使用Object.freeze()可以讓性能大幅提升。在我的實(shí)際開發(fā)中，這種提升大約有5~10倍，倍數(shù)隨著數(shù)據(jù)量遞增。
并且，Object.freeze()凍結(jié)的是值，你仍然可以將變量的引用替換掉。舉個(gè)例子：
{{ item.value }}
new Vue({
data: {
// vue不會(huì)對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的文檔沒有寫上這個(gè)特性，但這是個(gè)非常實(shí)用的做法，對于純展示的大數(shù)據(jù)，都可以使用Object.freeze提升性能。
使用 vm.$compile 編譯dom$compile函數(shù)可以用來手動(dòng)調(diào)用vue的方式來編譯dom。在你需要處理某個(gè)jQuery插件生成的html或者服務(wù)端返回的html的時(shí)候，這個(gè)函數(shù)可以派上用場。但注意這是個(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ù)沒有一個(gè)唯一的id，也可以選擇使用track-by="$index"，但必須注意一些副作用。
舉個(gè)例子:
new Vue({
data: {
list: [1, 2, 3]
}
})
{{ item }}
{{ item }}
這時(shí)候執(zhí)行this.list = [4, 5, 6]，可以通過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)化方法，但不是所有場景都適用，比如循環(huán)中包含表單控件或子組件時(shí)，由于dom并不會(huì)被刪除重新生成，會(huì)導(dǎo)致第二次執(zhí)行的v-for，原有表單控件的值不會(huì)改變，可以看這個(gè)例子：
https://jsfiddle.net/jysboza9/1/
網(wǎng)上有一種說法，認(rèn)為dom操作都應(yīng)該封裝在指令中。實(shí)際開發(fā)中，我認(rèn)為并不應(yīng)該遵循這種教條。是否使用指令應(yīng)該看你實(shí)現(xiàn)的是什么功能，而不是看是否操作了dom。比如說你想用vue封裝一個(gè)jQuery插件，來看看下面哪種封裝方法比較好：
個(gè)人認(rèn)為無疑是第一種方法更好，datepicker是一個(gè)獨(dú)立的組件，你并不需要關(guān)心他的內(nèi)部是否操作了dom，是否封裝了jQuery插件。
那么什么時(shí)候使用指令呢？來看一下瀏覽器原生提供的指令：
title屬性為不同的標(biāo)簽提供tooltip功能，這就是一個(gè)指令。一個(gè)指令應(yīng)該表示一個(gè)獨(dú)立的功能，可以為不同的標(biāo)簽和組件提供相同的功能。
（待續(xù)...）
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90900.html
摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...
摘要：前端日報(bào)精選深入理解綁定請使用千位分隔符逗號表示網(wǎng)頁中的大數(shù)字跨頁面通信的各種姿勢你所不知道的濾鏡技巧與細(xì)節(jié)代碼質(zhì)量管控復(fù)雜度檢測中文翻譯基于與的三種代碼分割范式掘金系列如何構(gòu)建應(yīng)用程序冷星的前端雜貨鋪第期美團(tuán)旅行前端技術(shù)體系 2017-09-16 前端日報(bào) 精選 深入理解 js this 綁定請使用千位分隔符(逗號)表示web網(wǎng)頁中的大數(shù)字跨頁面通信的各種姿勢你所不知道的 CSS 濾...
摘要：前言安裝，因?yàn)檐浖姹旧系男枨笏钥紤]將升級至，加上生產(chǎn)環(huán)境還是以為主，互聯(lián)網(wǎng)自動(dòng)化運(yùn)維平臺(tái)大多數(shù)也推薦以來操作，選擇還是也沒有定論，找到適合的搭配即可。 前言 CentOS 6.8 安裝 Python 2.7.13，因?yàn)檐浖姹旧系男枨笏钥紤]將 Python 升級至 2.7.13，加上生產(chǎn)環(huán)境還是以 RHEL 6 為主，互聯(lián)網(wǎng)自動(dòng)化運(yùn)維平臺(tái)大多數(shù)也推薦以Python 2.7.x +...
閱讀 1480·2019-08-30 15:55
閱讀 1178·2019-08-30 15:52
閱讀 1301·2019-08-29 13:53
閱讀 1474·2019-08-29 11:19
閱讀 2980·2019-08-26 13:29
閱讀 537·2019-08-26 11:33
閱讀 2601·2019-08-23 17:20
閱讀 1032·2019-08-23 14:14
