关于Vue源码vm.$watch()内部原理详解
(编辑:jimmy 日期: 2024/11/3 浏览:3 次 )
关于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"${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: "${expOrFn}" ` + 'Watcher only accepts simple dot-delimited paths. ' + 'For full control, use a function instead.', vm ) } } // 求值 this.value = this.lazy "${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 } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:JS异步错误捕获的一些事小结