這兩天學習了Vue.js 中的 $watch這個地方知識點挺多的，而且很重要，所以，今天添加一點小筆記。
Observer, Watcher, vm 可謂 Vue 中比較重要的部分，檢測數據變動后視圖更新的重要環節。下面我們來看看 如何實現一個簡單的 $watch 功能，當然Vue 中使用了很多優化手段，在本文中暫不一一討論。
例子:
// 創建 vmlet vm = new Vue({ data: 'a'})// 鍵路徑vm.$watch('a.b.c', function () { // 做點什么})先闡明在這個 demo 以及Vue 中，它們的關系：
vm 調用 $watch 后，首先調用 observe 函數 創建 Observer 實例觀察數據，Observer 又創建 Dep , Dep 用來維護訂閱者。然后創建 Watcher 實例提供 update 函數。一旦數據變動，就層層執行回調函數。
Observer和observe
遞歸調用 observe 函數創建 Observer。在創建 Observer 的過程中，使用 Object.defineProperty() 函數為其添加 get set 函數， 并創建 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 有值，此時執行到了上面的 defineReactive 函數中 get 函數。就添加訂閱者 Dep.target = null // 為了不重復添加 就設置為 null return value}Vue Instance
在 Vue Instance 做得最多的事情就是初始化 State， 添加函數等等。
// Vue 實例export default function Vue(options) { this.$options = options this._initState()}// 初始化StateVue.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 均不支持。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
