vue2.0實踐的一些細節


最近用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.一些需要在頁面打開的時候就作出判斷的請求,數據初始化時需要注意處理請求超時的情況。

如BI排序,可以用setInterval 設置一個輪詢次數,如果請求還是沒有回應則放棄請求,用默認情況處理。
        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')

  

 最后,別人的框架都是比較易學易用的。打好基礎才能創造出讓人易學易用的框架。

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM