vue 實踐心得和技巧（一）

原文： https://github.com/Coffcer/Bl...

這個系列記錄我在一年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功能，這就是一個指令。一個指令應該表示一個獨立的功能，能夠爲不一樣的標籤和組件提供相同的功能。

（待續...）