Vue.js 中的 $watch使用方法

更新時間：2017年05月25日 16:58:08 作者：ericjj

本篇文章中主要介紹了Vue.js 中的 $watch使用方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

這兩天學習了Vue.js 中的 $watch這個地方知識點挺多的，而且很重要，所以，今天添加一點小筆記。

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

例子:

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

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

先闡明在這個 demo 以及Vue 中，它們的關系：

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

Observer和observe

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

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 函數
 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 初始化時獲取的, 就添加訂閱者
   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()
  }
 })
}

你可能會疑問 Dep.target 是個什么鬼？😳

答案是：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

為了給每個數據添加訂閱者，我們想到的辦法是在數據的 get 函數中，但是 get 函數會調用很多次呀~。。。腫么辦？那就給 Dep 添加個參數 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]
 // 此時 target 有值，此時執(zhí)行到了上面的 defineReactive 函數中 get 函數。就添加訂閱者
 Dep.target = null
 // 為了不重復添加 就設置為 null
 return value
}

Vue Instance

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

// Vue 實例
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 函數,
Vue.prototype.$watch = function (expOrFn, fn, options) {
 new Watcher(this, expOrFn, fn)
}

總結

至此，我們已經實現了一個簡單的 $watch 函數， Object.defineProperty() 函數可謂是舉足輕重，因此不支持該函數的瀏覽器， Vue 均不支持。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: