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

柏成發表於2023-04-20
Vue原始碼

上一章 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 ，原始碼在此???

class Watcher {
  constructor(vm, exprOrFn, options, cb) {
    if (typeof exprOrFn === 'string') {
      this.getter = function () {
        return vm[exprOrFn]
      }
    } else {
      this.getter = exprOrFn // getter意味著呼叫這個函式可以發生取值操作
    }

    // 監聽器watcher 用到的屬性
    this.user = options.user // 標識是否是使用者自己的watcher
    this.deep = options.deep
    this.cb = cb
    this.value =  this.get() // 儲存 get返回值
  }

  get() {
    pushTarget(this) 
    let value = this.getter.call(this.vm) 
    this.deep && JSON.stringify(value) // 深度監聽
    popTarget() 
    return value
  }

  // 重新渲染
  update() {
    queueWatcher(this) // 把當前的watcher 暫存起來，非同步佇列渲染
  }

  // queueWatcher 內部執行 run 方法
  run() {
    let oldValue = this.value
    let newValue = this.value = this.get()
    if (this.user) {
      this.cb.call(this.vm, newValue, oldValue)
    }
  }
}

相關文章