Vue.js 中的 $watch使用方法

發(fā)布時(shí)間：2020-09-24 04:45:14 來源：腳本之家閱讀：574 作者：ericjj 欄目：web開發(fā)

這兩天學(xué)習(xí)了Vue.js 中的 $watch這個(gè)地方知識(shí)點(diǎn)挺多的，而且很重要，所以，今天添加一點(diǎn)小筆記。

github 源碼

Observer, Watcher, vm 可謂 Vue 中比較重要的部分，檢測(cè)數(shù)據(jù)變動(dòng)后視圖更新的重要環(huán)節(jié)。下面我們來看看如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 $watch 功能，當(dāng)然Vue 中使用了很多優(yōu)化手段，在本文中暫不一一討論。

例子:

// 創(chuàng)建 vm
let vm = new Vue({
 data: 'a'
})

// 鍵路徑
vm.$watch('a.b.c', function () {
 // 做點(diǎn)什么
})

先闡明在這個(gè) demo 以及Vue 中，它們的關(guān)系：

vm 調(diào)用 $watch 后，首先調(diào)用 observe 函數(shù) 創(chuàng)建 Observer 實(shí)例觀察數(shù)據(jù)，Observer 又創(chuàng)建 Dep , Dep 用來維護(hù)訂閱者。然后創(chuàng)建 Watcher 實(shí)例提供 update 函數(shù)。一旦數(shù)據(jù)變動(dòng)，就層層執(zhí)行回調(diào)函數(shù)。

Vue.js 中的 $watch使用方法

Observer和observe

遞歸調(diào)用 observe 函數(shù)創(chuàng)建 Observer。在創(chuàng)建 Observer 的過程中，使用 Object.defineProperty() 函數(shù)為其添加 get set 函數(shù)，并創(chuàng)建 Dep 實(shí)例。

export function observe (val) {
 if (!val || typeof val !== 'object') {
  return
 }
 return new Observer(val)
}

function defineReactive (obj, key, val) {
 var dep = new Dep()

 var property = Object.getOwnPropertyDescriptor(obj, key)
 // 是否允許修改
 if (property && property.configurable === false) {
  return
 }

 // 獲取定義好的 get set 函數(shù)
 var getter = property && property.get
 var setter = property && property.set

 var childOb = observe(val)
 Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: () => {
   var value = getter ? getter.call(obj) : val
   // 說明是 Watcher 初始化時(shí)獲取的, 就添加訂閱者
   if (Dep.target) {
    dep.depend()
    if (childOb) {
     childOb.dep.depend()
    }
    // if isArray do some....
   }
   return value
  },
  set: (newVal) => {
   var value = getter ? getter.call(obj) : val
   if (value === newVal) {
    return
   }
   if (setter) {
    setter.call(obj, newVal)
   } else {
    val = newVal
   }
   childOb = observe(newVal)
   dep.notify()
  }
 })
}

你可能會(huì)疑問 Dep.target 是個(gè)什么鬼？😳

答案是：Watcher，我們接下來看

Dep

export default function Dep () {
 this.subs = []
}

// 就是你！！~
Dep.target = null 

// 添加訂閱者
Dep.prototype.addSub = function (sub) {
 this.subs.push(sub)
}

// 添加依賴
Dep.prototype.depend = function () {
 Dep.target.addDep(this)
}

// 通知訂閱者：要更新啦~
Dep.prototype.notify = function () {
 this.subs.forEach(sub => sub.update())
}

Watcher

為了給每個(gè)數(shù)據(jù)添加訂閱者，我們想到的辦法是在數(shù)據(jù)的 get 函數(shù)中，但是 get 函數(shù)會(huì)調(diào)用很多次呀~。。。腫么辦？那就給 Dep 添加個(gè)參數(shù) target

export default function Watcher (vm, expOrFn, cb) {
 this.cb = cb
 this.vm = vm
 this.expOrFn = expOrFn
 this.value = this.get()
}

Watcher.prototype.get = function () {
 Dep.target = this
 const value = this.vm._data[this.expOrFn]
 // 此時(shí) target 有值，此時(shí)執(zhí)行到了上面的 defineReactive 函數(shù)中 get 函數(shù)。就添加訂閱者
 Dep.target = null
 // 為了不重復(fù)添加 就設(shè)置為 null
 return value
}

Vue Instance

在 Vue Instance 做得最多的事情就是初始化 State，添加函數(shù)等等。

// Vue 實(shí)例
export default function Vue(options) {
 this.$options = options
 this._initState()
}

// 初始化State
Vue.prototype._initState = function () {
 let data = this._data = this.$options.data
 Object.keys(data).forEach(key => this._proxy(key))
 observe(data, this)
}

// $watch 函數(shù),
Vue.prototype.$watch = function (expOrFn, fn, options) {
 new Watcher(this, expOrFn, fn)
}

總結(jié)

至此，我們已經(jīng)實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的 $watch 函數(shù)， Object.defineProperty() 函數(shù)可謂是舉足輕重，因此不支持該函數(shù)的瀏覽器， Vue 均不支持。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

Vue.js 中的 $watch使用方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽