最近用vue2.0做了個活動。做完了回頭發現,好像並沒有太多的技術難點,而自己好像又做了比較久。。。只能說效率有待提升啊。。。簡單總結了一些比較細節的點。
1.對於一些已知肯定會有數據的模塊,先用一個有高度的元素占位,不然當數據加載好渲染的時候會出現跳動的感覺。可以這樣寫:
<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有好些地方不一樣,寫組件的時候可以寫一下兼容。如:
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.一些需要在頁面打開的時候就作出判斷的請求,數據初始化時需要注意處理請求超時的情況。

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渲染模板也是阻塞的過程,下面這段代碼可以驗證這一點:
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的路由的時候,不能完全按照官網上的例子。配置好之后,還需要注冊一下才可以使用。
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')
最后,別人的框架都是比較易學易用的。打好基礎才能創造出讓人易學易用的框架。