<ul id="eu2iw"></ul>

<strike id="eu2iw"></strike>

<del id="eu2iw"></del>

vue 實踐心得和技巧（一）

X1nFLY 發布于2019-08-22 10:35 / 2807人閱讀

摘要：原文這個系列記錄我在一年開發中總結的一些經驗和技巧。利用提升性能是新增的特性，可以凍結一個對象，防止對象被修改。僅在不得已的時候使用。一個指令應該表示一個獨立的功能，可以為不同的標簽和組件提供相同的功能。

原文： 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()凍結的是值，你仍然可以將變量的引用替換掉。舉個例子：

{{ item.value }}

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]
    }
})


    {{ item }}


    {{ item }}

這時候執行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插件，來看看下面哪種封裝方法比較好：

個人認為無疑是第一種方法更好，datepicker是一個獨立的組件，你并不需要關心他的內部是否操作了dom，是否封裝了jQuery插件。

那么什么時候使用指令呢？來看一下瀏覽器原生提供的指令：

title屬性為不同的標簽提供tooltip功能，這就是一個指令。一個指令應該表示一個獨立的功能，可以為不同的標簽和組件提供相同的功能。

（待續...）

云服務器 GPU云服務器使用心得與技巧 vue20開發實踐 Vue開發技巧 webrtc和vue

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90900.html

個人分享--web前端學習資源分享

摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

sherlock221 2019-08-20 18:59 評論0 收藏0
2017-09-16 前端日報

摘要：前端日報精選深入理解綁定請使用千位分隔符逗號表示網頁中的大數字跨頁面通信的各種姿勢你所不知道的濾鏡技巧與細節代碼質量管控復雜度檢測中文翻譯基于與的三種代碼分割范式掘金系列如何構建應用程序冷星的前端雜貨鋪第期美團旅行前端技術體系 2017-09-16 前端日報精選深入理解 js this 綁定請使用千位分隔符(逗號)表示web網頁中的大數字跨頁面通信的各種姿勢你所不知道的 CSS 濾...

cheng10 2019-08-22 11:08 評論0 收藏0
1月份前端資源分享

摘要：更多資源請文章轉自月份前端資源分享視頻前端技術論壇融合不可錯過的迷你庫測試框架實例教程為你詳細解讀請求頭的具體含意解析的庫如果要用前端框架，開發流程是怎樣的與有什么區別正確使用的方法是什么流程圖插件小如何讓元素只能輸入純文本前端技術中更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfront...

solocoder 2019-08-20 14:37 評論0 收藏0
Python 2.6 升級至 Python 2.7 的實踐心得

摘要：前言安裝，因為軟件版本上的需求所以考慮將升級至，加上生產環境還是以為主，互聯網自動化運維平臺大多數也推薦以來操作，選擇還是也沒有定論，找到適合的搭配即可。前言 CentOS 6.8 安裝 Python 2.7.13，因為軟件版本上的需求所以考慮將 Python 升級至 2.7.13，加上生產環境還是以 RHEL 6 為主，互聯網自動化運維平臺大多數也推薦以Python 2.7.x +...

godlong_X 2019-07-31 10:55 評論0 收藏0