vue經驗總結

看風景就發表於2017-05-13
Vue

1. vue中獲取dom節點時機

vue元件中獲取dom節點一定要在mounted週期之後的下一次事件迴圈，包括 component.$refs,component.$el,component.$children等
一般寫法在nextTick中獲取，mounted不是必須：
mounted(){
　　this.$nextTick(() = {
　　　　const el = this.$el;
　　})
}

2.watch變數合併更新

vue的dom更新是非同步的，因此watch一個變數時候，短時間內頻繁更新該變數的值，其watch方法只會執行一次
例如，在for迴圈總更新一個被watch的變數。解決方法，可以使用setTimeout延遲更新或者直接呼叫watch的方法。

3.vuex的頁面彈出error

可以在vuex的module state中新增error欄位，ajax出錯時，將錯誤賦值為error，
元件內再watch error欄位，彈出error內容

4.watch $route觸發時機

watch $route的方法只在元件被複用，即同一個元件內的路由切換時候，即同一個一級路由下的二級路由傳送變化時候觸發。
如果是一級路由發生變化，元件會被重新建立，會觸發created方法，不會觸發$route。在二級路由之間跳轉，只有一級路由相同才觸發。
例如：

/user/:id, id是個引數 /user/1 到 /user/2 會觸發user元件的$route方法
/account,/account/list,/account/create 從/account/list到/account/create會觸發account元件的$route方法，從/account/list到/user/1不會觸發

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      
    }
  }
}

5. Unknown custom element: <router-view>

未引入vueRouter
import vueRouter from 'vue-router'
Vue.use(vueRouter)

6. vue的props在模板中不能用駝峰 

在vue的props中可以使用駝峰寫法的屬性，但是在模板中必須改成中劃線形式，例如backClass在模板中必須改成back-class，否則會被當成是html標籤的自定義屬性，在props中取不到值

7. vue獲取路由引數

在vue元件中，使用this.$route獲取路由相關資訊，不是$router.

//params

this.$route.params

//query

this.$route.query

相關文章