上一章 Vue2計算屬性原理，我們介紹了計算屬性是如何實現的？計算屬性緩存原理？以及洋蔥模型是如何應用的？

本章目標

• 監聽器是如何實現的？
• 監聽器選項 - immediate、deep 內部實現

初始化

在 Vue初始化實例的過程中，如果用戶 options選項中存在偵聽器，則初始化偵聽器

// 初始化狀態
export function initState(vm) {
  const opts = vm.$options // 獲取所有的選項

  // 初始化監聽器
  if (opts.watch) { initWatch(vm) }
}

watch

類型：{ [key: string]: string | Function | Object | Array }
一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。

監聽器初始化時，需要相容 watch回調的各種類型。底層還是去調用vm.$watch創建一個監聽器watch

function initWatch(vm) {
  let watch = vm.$options.watch
  for (let key in watch) {
    const handler = watch[key] // handler有可能是 (字元串/對象/函數) 或 數組
    if (Array.isArray(handler)) {
      for (let i = 0; i < handler.length; i++) {
        createWatcher(vm, key, handler[i])
      }
    } else {
      createWatcher(vm, key, handler)
    }
  }
}

// handler 有可能是字元串、對象、函數
function createWatcher(vm, key, handler) {
  let options = {}
  // 相容字元串
  if (typeof handler === 'string') {
    handler = vm[handler]
  }
  // 相容對象
  else if (Object.prototype.toString.call(handler) === '[object Object]') {
    options = handler
    handler = handler.handler
  }
  return vm.$watch(key, handler, options)
}

vm.$watch

vm.$watch( expOrFn, callback, [options] )

參數：{string | Function} expOrFn
觀察 Vue 實例上的一個表達式或者一個函數計算結果的變化。回調函數得到的參數為新值和舊值

我們會創建一個 偵聽器watcher，標識user: true。如果 immediate選項值為 true，則立即執行一次callback回調

註：在 options選項中使用的偵聽器，最終也是調用此方法

Vue.prototype.$watch = function (exprOrFn, cb, options = {}) {
  options.user = true
  // exprOrFn 可能是字元串firstname or 函數()=>vm.firstname
  const watcher = new Watcher(this, exprOrFn, options, cb)

  // 立即執行
  if(options.immediate){
    cb.call(this, watcher.value, undefined)
  }
}

偵聽器Watcher

在初始化Vue實例時，我們會給每個偵聽器都創建一個對應watcher（我們稱之為偵聽器watcher，除此之外還有 渲染watcher 和 計算屬性watcher ），他有一個 value 屬性用於緩存偵聽器觀察的表達式的值

預設標識 user: true，用戶的，代表偵聽器watcher

exprOrFn，需要觀察的表達式或者一個函數的計算結果，需要相容字元串和函數兩種類型

cb，偵聽器回調函數。當觀察的對象發生變化時，會觸發dep.notify派發更新 並 調用 update 方法，然後再 run 方法中調用 cb 回調，其參數為新值和舊值

deep，偵聽器選項之一，代表深度監聽。我們需要在 get 方法中遞歸訪問每一個子屬性，這樣就會保證所有子屬性都會收集此偵聽器watcher，這裡我用了一個取巧的方法 - JSON.stringify ，源碼在此