最近用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')
最后,別人的框架都是比較易學易用的。打好基礎才能創造出讓人易學易用的框架。
