這兩天學(xué)習(xí)了Vue.js 中的 $watch這個(gè)地方知識(shí)點(diǎn)挺多的，而且很重要，所以，今天添加一點(diǎn)小筆記。
成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供東乃網(wǎng)站建設(shè)、東乃做網(wǎng)站、東乃網(wǎng)站設(shè)計(jì)、東乃網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、東乃企業(yè)網(wǎng)站模板建站服務(wù)，十年東乃做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
github 源碼
Observer, Watcher, vm 可謂 Vue 中比較重要的部分，檢測(cè)數(shù)據(jù)變動(dòng)后視圖更新的重要環(huán)節(jié)。下面我們來(lái)看看 如何實(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 用來(lái)維護(hù)訂閱者。然后創(chuàng)建 Watcher 實(shí)例提供 update 函數(shù)。一旦數(shù)據(jù)變動(dòng)，就層層執(zhí)行回調(diào)函數(shù)。
Observer和observe
遞歸調(diào)用 observe 函數(shù)創(chuàng)建 Observer。在創(chuàng)建 Observer 的過(guò)程中，使用 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
// 說(shuō)明是 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ì)疑問(wèn) Dep.target 是個(gè)什么鬼？😳
答案是：Watcher， 我們接下來(lái)看
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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
