初始化

在 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 =  https://www.cnblogs.com/burc/archive/2023/04/20/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)
    }
  }
}

人間不正經生活手冊

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550704.html

標籤：其他

上一篇：JS中的for in和for of

下一篇：返回列表

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

初始化

vm.$watch

偵聽器Watcher