vue2.0實踐的一些細節

標籤：官網   org   instance   依賴   ++   處理   實踐   2.0   1.0   

 

最近用vue2.0做了個活動。做完了回頭髮現，好像並沒有太多的技術痛點，而自己好像又做了比較久。。。只能說效率有待提升啊。。。簡單總結了一些比較細節的點。

1.對於一些已知肯定會有資料的模組，先用一個有高度的元素佔位，不然當資料載入好渲染的時候會出現跳動的感覺。可以這樣寫：

12345

<div class="yhq_inner">  //佔位元素<template v-if="true">  //加template則頁面載入時就不會顯示待編譯符號如:{{}}   <couponlist :params="{coupons:ppms.discountModule}"></couponlist> //請求到資料才會有的一個組件,並把資料傳進組件中</template></div>

 

2.注意使用一些全部的API。

  ①當資料是後來被更新的（如ajax請求回調），在資料更新後，用nextTick方法更新dom。

  ②對象不能是 Vue 執行個體，或者 Vue 執行個體的根資料對象。所以用對象裝載資料時，需要在初始化之前就設好改對象的預設屬性。或者，用Vue.set方法後來更新。

  更多參考這裡~

 

3.vue2.0和1.0有好些地方不一樣，寫組件的時候可以寫一下相容。如：

12345678910111213141516171819202122

Vue.component("Infolist", {            props: /^2\./.test(Vue.version) ? {                params: {                    coupons: [],                    showNum: 2                }            } : ["data", "sub-data"],            template: "#couponlistTpl",            data: function() {                return {                    data: {                        itemList: {}                    }                };            },            created: function() {                if (/^2\./.test(Vue.version)) {                   ...                } else {                   ...                } })

 

4.調用子組件的方法時，記得為子組件的ref賦值。然後可以在父組件中，類似this.$refs[‘interestlist‘].loadData()這樣調用。

 

5.一些需要在頁面開啟的時候就作出判斷的請求，資料初始化時需要注意處理請求逾時的情況。

如BI排序，可以用setInterval 設定一個輪詢次數，如果請求還是沒有回應則放棄請求，用預設情況處理。

123456789101112131415

if (window._SORT_DATA) {    //請求已成功，執行處理} else {    var intvaltime = 0;    var sortInterval = setInterval(function() {        intvaltime++;        if (window._SORT_DATA) {            clearInterval(sortInterval);            //請求已成功，執行處理        } else if (intvaltime == 4) {            clearInterval(sortInterval);           //請求達到上限，執行預設處理        }    },50);}

 

6.vue模板綁定資料時，若改資料不存在的話，一報錯就是整個頁面死掉。所以一定要將相關資料做預設賦值處理，提高頁面容錯性。

 

7.渲染的vue根節點內容過多，比如一個非常長的頁面上只有一個大vuewrap，這肯定也會長時間阻塞,因為vue渲染模板也是阻塞的過程，下面這段代碼可以驗證這一點：

12345678910111213141516

new Vue({              el: "#vue-wrap",     data: vueData,     methods:{        ...     },     created:function(){        console.log(‘created‘)     },     mounted:function(){        console.log(‘mounted‘)     }       });       console.log(‘next‘)}//輸出順序 created mounted next ,完全是同步的過程

 各個鉤子的意義可參考這裡~.

 所以，對於巨大的vuewrap，可以拆成小塊並非同步執行。否則，效能很可能會降低。

 

8.如果用vue開發項目，又想引入css架構的話，最好引入一些vue推薦的css架構，如element。如果引入類似semantic這種依賴於jquery或者其他第三方架構庫的，又要配置好幾個檔案，比較麻煩。而且也讓項目變得更重。

 

9.使用vue的路由的時候，不能完全按照官網上的例子。配置好之後，還需要註冊一下才可以使用。

1234567891011121314151617

import VueRouter from ‘vue-router‘ Vue.use(ElementUI)Vue.use(VueRouter) const routes = [  { path: ‘/‘, component: Index }] const router = new VueRouter({  routes}) const app = new Vue({  router,  ...App}).$mount(‘#app‘)

　　

　最後，別人的架構都是比較易學易用的。打好基礎才能創造出讓人易學易用的架構。

轉載

vue2.0實踐的一些細節