欢迎光临
我的个人博客网站

Vue2.x 响应式部分源码阅读记录

之前也用了一段时间Vue,对其用法也较为熟练了,但是对各种用法和各种api使用都是只知其然而不知其所以然。最近利用空闲时间尝试的去看看Vue的源码,以便更了解其具体原理实现,跟着学习学习。

Proxy 对 data 代理

传的 data 进去的为什么可以用this.xxx访问,而不需要 this.data.xxx 呢?

// vuesrccoreinstancestate.js const sharedPropertyDefinition = {   enumerable: true,   configurable: true,   get: noop,   set: noop } export function proxy (target: Object, sourceKey: string, key: string) {   sharedPropertyDefinition.get = function proxyGetter () {     return this[sourceKey][key]   }   sharedPropertyDefinition.set = function proxySetter (val) {     this[sourceKey][key] = val   }   Object.defineProperty(target, key, sharedPropertyDefinition) } function initData (vm: Component) {   let data = vm.$options.data   //...   const keys = Object.keys(data)   //...   let i = keys.length   while (i--) {     const key = keys[i]     //....      proxy(vm, `_data`, key)   }   observe(data, true /* asRootData */) } 

这段代码看起来还是很简单的,将 data 中得 key 遍历一遍,然后全部新增到实例上去,当我们访问修改 this.xxx 得时候,都是在访问修改 this._data.xxx

observer 模块

模块源码路径 vuesrccoreobserver
observer 模块可以说是 Vue 响应式得核心了,observer 模块主要是 Observer、Dep、Watcher这三个部分了

  • Observer 观察者,对数据进行观察和依赖收集等
  • Dep 是 Observer 和 Watcher 得一个桥梁,Observer 对数据进行响应式处理时候,会给每个属性生成一个 Dep 对象,然后通过调用 dep.depend() ,如果当前存在 Watcher 将当前 Dep 加入到 Watcher 中,然后在将 Watcher 添加到当前 Dep 中
  • Watcher 订阅者,数据变化会收到通知,然后进行相关操作,例如视图更新等

关系如下

      -------get 收集依赖--------   ----------- 订阅 -------------       |                         |  |                            |       |                         V  |                            | ------------                ------------                  ------------- | Obserser | ----  set ---->|    Dep   |------- 通知 ---->|  Watcher  | ------------                ------------                  -------------                                                                 |                                                               update                                                                 |                                                           -------------                                                           |   View    |                                                           ------------- 

1.Observer

initData() 方法调用了 observe(data, true /* asRootData */) 先来看下这个方法

//对value 进行观察处理 export function observe (value: any, asRootData: ?boolean): Observer | void {   //判断处理 value 必须是对象 并且不能是 VNode   if (!isObject(value) || value instanceof VNode) {     return   }   let ob: Observer | void   if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {     ob = value.__ob__   } else if (     shouldObserve &&     !isServerRendering() &&     (Array.isArray(value) || isPlainObject(value)) &&     Object.isExtensible(value) &&     !value._isVue   ) {     ob = new Observer(value)   }   if (asRootData && ob) {     ob.vmCount++   }   return ob } 

如果 data.__ob__ 已经存在直接返回,否则new一个新的 Observer 实例,下面是 Observer 类代码

export class Observer {   value: any;   dep: Dep;   vmCount: number; // number of vms that have this object as root $data   constructor (value: any) {     this.value = value     // 这个dep 在 value 的属性新增 删除时候会用到     //value 如果是数组 也是通过 这里的进行 依赖收集更新的     this.dep = new Dep()      this.vmCount = 0     def(value, '__ob__', this)     if (Array.isArray(value)) {       //这里是对数组原型对象 拦截 处理       if (hasProto) {         protoAugment(value, arrayMethods)       } else {         copyAugment(value, arrayMethods, arrayKeys)       }       this.observeArray(value)     } else {       this.walk(value)     }   }   walk (obj: Object) {     const keys = Object.keys(obj)     for (let i = 0; i < keys.length; i++) {       defineReactive(obj, keys[i])     }   }   observeArray (items: Array<any>) {     for (let i = 0, l = items.length; i < l; i++) {       observe(items[i])     }   } } 

在构造函数中,会给 value(data)增加 __ob__ (当前 Observer实例 ) 属性。如果 value 是数组,会调用 observeArray 对数组进行遍历,在调用 observe 方法对每个元素进行观察。如果是对象,调用 walk 遍历 value 去调用 defineReactive 去修改属性的 get/set。

//defineReactive 函数 export function defineReactive (   obj: Object,   key: string, //遍历的key   val: any,   customSetter?: ?Function,   shallow?: boolean ) {   const dep = new Dep()   const property = Object.getOwnPropertyDescriptor(obj, key)   if (property && property.configurable === false)  return      // cater for pre-defined getter/setters   const getter = property && property.get   const setter = property && property.set   if ((!getter || setter) && arguments.length === 2) {     val = obj[key]   }   //如果 key 的值是 对象 的话,对其 value 也会进行响应处理   let childOb = !shallow && observe(val)   //为当前 key 添加get/set   Object.defineProperty(obj, key, {     enumerable: true,     configurable: true,     get: function reactiveGetter () {       const value = getter ? getter.call(obj) : val              if (Dep.target) {         dep.depend() //对当前属性 进行依赖收集         if (childOb) {           //如果属性值是 对象 ,则对属性值本身进行依赖收集           childOb.dep.depend()           if (Array.isArray(value)) {             //如果值是数组 对数组的每个元素进行依赖收集             dependArray(value)           }         }       }       return value     },     set: function reactiveSetter (newVal) {       const value = getter ? getter.call(obj) : val       if (newVal === value || (newVal !== newVal && value !== value)) {         return       }       if (getter && !setter) return       if (setter) {         setter.call(obj, newVal)       } else {         val = newVal       }       //对新值 进行观察处理       childOb = !shallow && observe(newVal)       //通知 Watcher       dep.notify()     }   }) } function dependArray (value: Array<any>) {   for (let e, i = 0, l = value.length; i < l; i++) {     e = value[i]     e && e.__ob__ && e.__ob__.dep.depend()     if (Array.isArray(e)) {       dependArray(e)     }   } } 

上面有两个地方有存在 Dep

  • 一个是Observer 类 属性上有个Dep,这里主要是对数组(数组没有get/set不能像对象属性那样)和对象本身进行依赖收集和通知
    Vue2.x 响应式部分源码阅读记录
    Vue2.x 响应式部分源码阅读记录
  • 一个是对属性get/set处理时候的Dep,这个主要是对象的属性进行依赖收集和通知

2.Dep

Dep 是 Observer 与 Watcher 桥梁,也可以认为Dep是服务于Observer的订阅系统。Watcher订阅某个Observer的Dep,当Observer观察的数据发生变化时,通过Dep通知各个已经订阅的Watcher。

export default class Dep {   static target: ?Watcher;   id: number;   subs: Array<Watcher>;   constructor () {     this.id = uid++     this.subs = [] //Watcher实例   }   //接收的参数为Watcher实例,并把Watcher实例存入记录依赖的数组中   addSub (sub: Watcher) {     this.subs.push(sub)   }   //与addSub对应,作用是将Watcher实例从记录依赖的数组中移除   removeSub (sub: Watcher) {     remove(this.subs, sub)   }   //依赖收集   depend () {     if (Dep.target) { //存放当前Wather实例       //将当前 Dep 存放到 Watcher(观察者) 中的依赖中       Dep.target.addDep(this)     }   }   //通知依赖数组中所有的watcher进行更新操作   notify () {     const subs = this.subs.slice()     for (let i = 0, l = subs.length; i < l; i++) {       subs[i].update()     }   } } Dep.target = null const targetStack = [] export function pushTarget (target: ?Watcher) {   targetStack.push(target)   Dep.target = target } export function popTarget () {   targetStack.pop()   Dep.target = targetStack[targetStack.length - 1] } 

3.Watcher

先看 Watcher 的构造函数

constructor(      vm: Component,     expOrFn: string | Function,     cb: Function,     options?: ?Object,     isRenderWatcher?: boolean) {     ...     if (typeof expOrFn === 'function') {       this.getter = expOrFn     } else {       this.getter = parsePath(expOrFn)       if (!this.getter) {         this.getter = noop       }     }     this.value = this.lazy       ? undefined       : this.get() } 

expOrFn,对于初始化用来渲染视图的 watcher 来说,就是render方法,对于computed来说就是表达式,对于watch才是key,而getter方法是用来取value的。最后调用了get()方法

get () {     //将Dep.target设置为当前watcher实例     pushTarget(this)     let value     const vm = this.vm     try {       // 执行一次get 收集依赖       value = this.getter.call(vm, vm)      } catch (e) {       if (this.user) {         handleError(e, vm, `getter for watcher "${this.expression}"`)       } else {         throw e       }     } finally {       if (this.deep) {         traverse(value)       }       popTarget()       this.cleanupDeps() //清楚依赖     }     return value } 

假如当前Watcher实例中 getter 是 render,当render遇到模板中的{{xxx}}表达式的时候,就是去读取 data.xxx,这个时候就触发 data.xxx 的 get方法,这个时候 get 中会执行Dep.depend(),而此时 Dep.target 就是当前 watcher ,然后调用 watcher.addDep()。也就将data.xxx 与 当前watcher 关联起来了

//watcher 的其他方法 //接收参数dep(Dep实例),让当前watcher订阅dep addDep (dep: Dep) {   const id = dep.id   if (!this.newDepIds.has(id)) {     this.newDepIds.add(id)     this.newDeps.push(dep)     if (!this.depIds.has(id)) {       //将watcher实例 也添加到 Dep实例中       dep.addSub(this)     }   } } //清楚对dep的订阅信息 cleanupDeps () {    } //立刻运行watcher或者将watcher加入队列中 update () {   if (this.lazy) {     this.dirty = true   } else if (this.sync) {     this.run()   } else {     queueWatcher(this)   } } //运行watcher,调用this.get()求值,然后触发回调 run () {   if (this.active) {     const value = this.get()     if (       value !== this.value || isObject(value) || this.deep     ) {       const oldValue = this.value       this.value = value       if (this.user) {         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)       }     }   } } //调用this.get()求值 evaluate () {   this.value = this.get()   this.dirty = false } //遍历this.deps,让当前watcher实例订阅所有dep depend () {   let i = this.deps.length   while (i--) {     this.deps[i].depend()   } } //去除当前watcher实例所有的订阅 teardown () {   if (this.active) {     if (!this.vm._isBeingDestroyed) {       remove(this.vm._watchers, this)     }     let i = this.deps.length     while (i--) {       this.deps[i].removeSub(this)     }     this.active = false   } } 
赞(0) 打赏
未经允许不得转载:张拓的天空 » Vue2.x 响应式部分源码阅读记录
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏