vm.$watch()用法
關於vm.$watch()詳細用法可以見官網。
大致用法如下:
<script>
const app = new Vue({
el: "#app",
data: {
a: {
b: {
c: 'c'
}
}
},
mounted () {
this.$watch(function () {
return this.a.b.c
}, this.handle, {
deep: true,
immediate: true // 預設會初始化執行一次handle
})
},
methods: {
handle (newVal, oldVal) {
console.log(this.a)
console.log(newVal, oldVal)
},
changeValue () {
this.a.b.c = 'change'
}
}
})
</script>
複製程式碼
可以看到data屬性整個a物件被Observe, 只要被Observe就會有一個__ob__標示(即Observe例項), 可以看到__ob__裡面有dep，前面講過依賴(dep)都是存在Observe例項裡面, subs儲存的就是對應屬性的依賴(Watcher)。 好了回到正文, vm.$watch()在原始碼內部如果實現的。
內部實現原理
// 判斷是否是物件
export function isPlainObject (obj: any): boolean {
return _toString.call(obj) === '[object Object]'
}
複製程式碼原始碼位置: vue/src/core/instance/state.js
// $watch 方法允許我們觀察資料物件的某個屬性，當屬性變化時執行回撥
// 接受三個引數: expOrFn(要觀測的屬性), cb, options(可選的配置物件)
// cb即可以是一個回撥函式, 也可以是一個純物件(這個物件要包含handle屬性。)
// options: {deep, immediate}, deep指的是深度觀測, immediate立即執行回掉
// $watch()本質還是建立一個Watcher例項物件。
Vue.prototype.$watch = function (
expOrFn: string | Function,
cb: any,
options?: Object
): Function {
// vm指向當前Vue例項物件
const vm: Component = this
if (isPlainObject(cb)) {
// 如果cb是一個純物件
return createWatcher(vm, expOrFn, cb, options)
}
// 獲取options
options = options || {}
// 設定user: true, 標示這個是由使用者自己建立的。
options.user = true
// 建立一個Watcher例項
const watcher = new Watcher(vm, expOrFn, cb, options)
if (options.immediate) {
// 如果immediate為真, 馬上執行一次回撥。
try {
// 此時只有新值, 沒有舊值, 在上面截圖可以看到undefined。
// 至於這個新值為什麼通過watcher.value, 看下面我貼的程式碼
cb.call(vm, watcher.value)
} catch (error) {
handleError(error, vm, `callback for immediate watcher "${watcher.expression}"`)
}
}
// 返回一個函式，這個函式的執行會解除當前觀察者對屬性的觀察
return function unwatchFn () {
// 執行teardown()
watcher.teardown()
}
}
複製程式碼關於watcher.js。
原始碼路徑: vue/src/core/observer/watcher.js
export default class Watcher {
vm: Component;
expression: string;
cb: Function;
id: number;
deep: boolean;
user: boolean;
lazy: boolean;
sync: boolean;
dirty: boolean;
active: boolean;
deps: Array<Dep>;
newDeps: Array<Dep>;
depIds: SimpleSet;
newDepIds: SimpleSet;
before: ?Function;
getter: Function;
value: any;
constructor (
vm: Component, // 元件例項物件
expOrFn: string | Function, // 要觀察的表示式
cb: Function, // 當觀察的表示式值變化時候執行的回撥
options?: ?Object, // 給當前觀察者物件的選項
isRenderWatcher?: boolean // 標識該觀察者例項是否是渲染函式的觀察者
) {
// 每一個觀察者例項物件都有一個 vm 例項屬性，該屬性指明瞭這個觀察者是屬於哪一個元件的
this.vm = vm
if (isRenderWatcher) {
// 只有在 mountComponent 函式中建立渲染函式觀察者時這個引數為真
// 元件例項的 _watcher 屬性的值引用著該元件的渲染函式觀察者
vm._watcher = this
}
vm._watchers.push(this)
// options
// deep: 當前觀察者例項物件是否是深度觀測
// 平時在使用 Vue 的 watch 選項或者 vm.$watch 函式去觀測某個資料時，
// 可以通過設定 deep 選項的值為 true 來深度觀測該資料。
// user: 用來標識當前觀察者例項物件是 開發者定義的 還是 內部定義的
// 無論是 Vue 的 watch 選項還是 vm.$watch 函式，他們的實現都是通過例項化 Watcher 類完成的
// sync: 告訴觀察者當資料變化時是否同步求值並執行回撥
// before: 可以理解為 Watcher 例項的鉤子，當資料變化之後，觸發更新之前，
// 呼叫在建立渲染函式的觀察者例項物件時傳遞的 before 選項。
if (options) {
this.deep = !!options.deep
this.user = !!options.user
this.lazy = !!options.lazy
this.sync = !!options.sync
this.before = options.before
} else {
this.deep = this.user = this.lazy = this.sync = false
}
// cb: 回撥
this.cb = cb
this.id = ++uid // uid for batching
this.active = true
// 避免收集重複依賴，且移除無用依賴
this.dirty = this.lazy // for lazy watchers
this.deps = []
this.newDeps = []
this.depIds = new Set()
this.newDepIds = new Set()
this.expression = process.env.NODE_ENV !== 'production'
? expOrFn.toString()
: ''
// 檢測了 expOrFn 的型別
// this.getter 函式終將會是一個函式
if (typeof expOrFn === 'function') {
this.getter = expOrFn
} else {
this.getter = parsePath(expOrFn)
if (!this.getter) {
this.getter = noop
process.env.NODE_ENV !== 'production' && warn(
`Failed watching path: "${expOrFn}" ` +
'Watcher only accepts simple dot-delimited paths. ' +
'For full control, use a function instead.',
vm
)
}
}
// 求值
this.value = this.lazy
? undefined
: this.get()
}
/**
* 求值: 收集依賴
* 求值的目的有兩個
* 第一個是能夠觸發訪問器屬性的 get 攔截器函式
* 第二個是能夠獲得被觀察目標的值
*/
get () {
// 推送當前Watcher例項到Dep.target
pushTarget(this)
let value
// 快取vm
const vm = this.vm
try {
// 獲取value
value = this.getter.call(vm, vm)
} catch (e) {
if (this.user) {
handleError(e, vm, `getter for watcher "${this.expression}"`)
} else {
throw e
}
} finally {
// "touch" every property so they are all tracked as
// dependencies for deep watching
if (this.deep) {
// 遞迴地讀取被觀察屬性的所有子屬性的值
// 這樣被觀察屬性的所有子屬性都將會收集到觀察者，從而達到深度觀測的目的。
traverse(value)
}
popTarget()
this.cleanupDeps()
}
return value
}
/**
* 記錄自己都訂閱過哪些Dep
*/
addDep (dep: Dep) {
const id = dep.id
// newDepIds: 避免在一次求值的過程中收集重複的依賴
if (!this.newDepIds.has(id)) {
this.newDepIds.add(id) // 記錄當前watch訂閱這個dep
this.newDeps.push(dep) // 記錄自己訂閱了哪些dep
if (!this.depIds.has(id)) {
// 把自己訂閱到dep
dep.addSub(this)
}
}
}
/**
* Clean up for dependency collection.
*/
cleanupDeps () {
let i = this.deps.length
while (i--) {
const dep = this.deps[i]
if (!this.newDepIds.has(dep.id)) {
dep.removeSub(this)
}
}
//newDepIds 屬性和 newDeps 屬性被清空
// 並且在被清空之前把值分別賦給了 depIds 屬性和 deps 屬性
// 這兩個屬性將會用在下一次求值時避免依賴的重複收集。
let tmp = this.depIds
this.depIds = this.newDepIds
this.newDepIds = tmp
this.newDepIds.clear()
tmp = this.deps
this.deps = this.newDeps
this.newDeps = tmp
this.newDeps.length = 0
}
/**
* Subscriber interface.
* Will be called when a dependency changes.
*/
update () {
/* istanbul ignore else */
if (this.lazy) {
this.dirty = true
} else if (this.sync) {
// 指定同步更新
this.run()
} else {
// 非同步更新佇列
queueWatcher(this)
}
}
/**
* Scheduler job interface.
* Will be called by the scheduler.
*/
run () {
if (this.active) {
const value = this.get()
// 對比新值 value 和舊值 this.value 是否相等
// 是物件的話即使值不變(引用不變)也需要執行回撥
// 深度觀測也要執行
if (
value !== this.value ||
// Deep watchers and watchers on Object/Arrays should fire even
// when the value is the same, because the value may
// have mutated.
isObject(value) ||
this.deep
) {
// set new value
const oldValue = this.value
this.value = value
if (this.user) {
// 意味著這個觀察者是開發者定義的，所謂開發者定義的是指那些通過 watch 選項或 $watch 函式定義的觀察者
try {
this.cb.call(this.vm, value, oldValue)
} catch (e) {
// 回撥函式在執行的過程中其行為是不可預知, 出現錯誤給出提示
handleError(e, this.vm, `callback for watcher "${this.expression}"`)
}
} else {
this.cb.call(this.vm, value, oldValue)
}
}
}
}
/**
* Evaluate the value of the watcher.
* This only gets called for lazy watchers.
*/
evaluate () {
this.value = this.get()
this.dirty = false
}
/**
* Depend on all deps collected by this watcher.
*/
depend () {
let i = this.deps.length
while (i--) {
this.deps[i].depend()
}
}
/**
* 把Watcher例項從從當前正在觀測的狀態的依賴列表中移除
*/
teardown () {
if (this.active) {
// 該觀察者是否啟用狀態
if (!this.vm._isBeingDestroyed) {
// _isBeingDestroyed一個標識，為真說明該元件例項已經被銷燬了，為假說明該元件還沒有被銷燬
// 將當前觀察者例項從元件例項物件的 vm._watchers 陣列中移除
remove(this.vm._watchers, this)
}
// 當一個屬性與一個觀察者建立聯絡之後，屬性的 Dep 例項物件會收集到該觀察者物件
let i = this.deps.length
while (i--) {
this.deps[i].removeSub(this)
}
// 非啟用狀態
this.active = false
}
}
}
複製程式碼export const unicodeRegExp = /a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/
const bailRE = new RegExp(`[^${unicodeRegExp.source}.$_\\d]`)
// path為keypath(屬性路徑) 處理'a.b.c'(即vm.a.b.c) => a[b[c]]
export function parsePath (path: string): any {
if (bailRE.test(path)) {
return
}
const segments = path.split('.')
return function (obj) {
for (let i = 0; i < segments.length; i++) {
if (!obj) return
obj = obj[segments[i]]
}
return obj
}
}
複製程式碼