初始化

在 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 ，原始碼在此

【Vue2.x原始碼系列07】監聽器watch原理

初始化

vm.$watch

偵聽器Watcher