vue的鈎子函數

1.computed 計算屬性

計算屬性將被混入到 Vue 實例中。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue

1..aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
2.. aPlus(){
　　　　return this.$router.params
　　}

這兩種方法都可以，平時我們可以只寫get，可以寫成2形式，省略set方法，但是如果我們相對我們的計算屬性進行修改，這個set方法不能省略。

2.methods 方法

這里只提一下它和computed的區別

methods 和 computed 看起來可以做同樣的事情，單純看結果兩種方式確實是相同的。
然而，不同的是計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變
時才會重新求值。這就意味着只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會
立即返回之前的計算結果，而不必再次執行函數。相比而言，只要發生重新渲染，method 調用總會執行
該函數。

3.watcher

一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每一個屬性。

watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 深度 watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 該回調將會在偵聽開始之后被立即調用
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) { /* ... */ },
      function handle2 (val, oldVal) { /* ... */ }
    ],
}

這里主要說深度watcher 加一個 deep:true，類似於深拷貝的深，可以監聽數組和對象

4.生命周期函數

之前有總結過，這里說兩點

Vue.nextTick(function () {
  // DOM 更新了
})

在vue做表格的時候，一般在操作完之后，要更新列表刷新數據。但是我們本地做一些表格的變換，不想發請求怎么辦？我們可以利用nextTick，比如，<templeate v-if="tab === 'a' "></template> ,在我們更新完數據，這個表格因為沒有更新數據，所以它沒有變化，我們可以 this.tab = ' '  this.$nextTick(() => this.tab = 'a'）

 

在 Vue 生命周期的 created() 鈎子函數進行的 DOM 操作一定要放在 Vue.nextTick() 的回調函數中。原因是什么呢，原因是
1.在 created() 鈎子函數執行的時候 DOM 其實並未進行任何渲染，而此時進行 DOM 操作無異於徒勞，所以此處一定要將 DOM 操作的 js 代碼放進 Vue.nextTick() 的回調函數中。與之對應的就是 mounted 鈎子函數，因為該鈎子函數執行時所有的 DOM 掛載和渲染此時在該鈎子函數中進行任何DOM操作都不會有問題 。

2.在數據變化后要執行的某個操作，而這個操作需要使用隨數據改變而改變的 DOM 結構的時候，這個操作都應該放進 Vue.nextTick() 的回調函數中。

 

小結：

beforecreate : 可以在這加個loading事件，在加載實例時觸發 
created : 初始化完成時的事件寫在這里，如在這結束loading事件，異步請求也適宜在這里調用
mounted : 掛載元素，獲取到DOM節點
updated : 如果對數據統一處理，在這里寫上相應函數
beforeDestroy : 可以做一個確認停止事件的確認框
nextTick : 更新數據后立即操作dom