溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這兩天學習了Vue.js 中的 $watch這個地方知識點挺多的，而且很重要，所以，今天添加一點小筆記。
github 源碼
Observer, Watcher, vm 可謂 Vue 中比較重要的部分，檢測數據變動后視圖更新的重要環節。下面我們來看看 如何實現一個簡單的 $watch 功能，當然Vue 中使用了很多優化手段，在本文中暫不一一討論。
例子:
// 創建 vm
let 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()
}
// 初始化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 均不支持。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
