Vue源码阅读 – 依赖收集原理

vue已是目前国内前端web端三分天下之一,同时也作为本人主要技术栈之一,在日常使用中知其然也好奇着所以然,另外最近的社区涌现了一大票vue源码阅读类的文章,在下借这个机会从大家的文章和讨论中汲取了一些营养,同时对一些阅读源码时的想法进行总结,出产一些文章,作为自己思考的总结,本人水平有限,欢迎留言讨论~

目标Vue版本:2.5.17-beta.0

vue源码注释:github.com/SHERlocked9…

声明:文章中源码的语法都使用 Flow,并且源码根据需要都有删节(为了不被迷糊 @_@),如果要看完整版的请进入上面的github地址,本文是系列文章,文章地址见底部~

1. 响应式系统

通过官网的介绍我们知道 Vue.js 是一个MVVM框架,它并不关心视图变化,而通过数据驱动视图更新,这让我们的状态管理非常简单,而这是怎么实现的呢。盗用官网一张图


每个组件实例都有相应的 Watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。

这里有三个重要的概念 ObserveDepWatcher,分别位于src/core/observer/index.jssrc/core/observer/dep.jssrc/core/observer/watcher.js

  • Observe 类主要给响应式对象的属性添加 getter/setter 用于依赖收集与派发更新
  • Dep 类用于收集当前响应式对象的依赖关系
  • Watcher 类是观察者,实例分为渲染 watcher、计算属性 watcher、侦听器 watcher三种

2. 代码实现

2.1 initState

响应式化的入口位于 src/core/instance/init.js 的 initState 中:

它非常规律的定义了几个方法来初始化 propsmethodsdatacomputedwathcer,这里看一下 initData 方法,来窥一豹

首先判断了下 data 是不是函数,是则取返回值不是则取自身,之后有一个 observe 方法对 data 进行处理,这个方法尝试给创建一个Observer实例 __ob__,如果成功创建则返回新的Observer实例,如果已有Observer实例则返回现有的Observer实例

2.2 Observer/defineReactive

这个方法主要用 data 作为参数去实例化一个 Observer 对象实例,Observer 是一个 Class,用于依赖收集和 notify 更新,Observer 的构造函数使用 defineReactive 方法给对象的键响应式化,给对象的属性递归添加 getter/setter ,当data被取值的时候触发 getter 并搜集依赖,当被修改值的时候先触发 getter 再触发 setter 并派发更新

getter 的时候进行依赖的收集,注意这里,只有在 Dep.target 中有值的时候才会进行依赖收集,这个 Dep.target 是在Watcher实例的 get 方法调用的时候 pushTarget 会把当前取值的watcher推入 Dep.target,原先的watcher压栈到 targetStack 栈中,当前取值的watcher取值结束后出栈并把原先的watcher值赋给 Dep.targetcleanupDeps 最后把新的 newDeps 里已经没有的watcher清空,以防止视图上已经不需要的无用watcher触发

setter 的时候首先 getter,并且比对旧值没有变化则return,如果发生变更,则dep通知所有subs中存放的依赖本数据的Watcher实例 update 进行更新,这里 update 中会 queueWatcher( ) 异步推送到调度者观察者队列 queue 中,在nextTick时 flushSchedulerQueue( ) 把队列中的watcher取出来执行 watcher.run 且执行相关钩子函数

2.3 Dep

上面多次提到了一个关键词 Dep,他是依赖收集的容器,或者称为依赖搜集器,他记录了哪些Watcher依赖自己的变化,或者说,哪些Watcher订阅了自己的变化;这里引用一个网友的发言:

@liuhongyi0101 :简单点说就是引用计数 ,谁借了我的钱,我就把那个人记下来,以后我的钱少了 我就通知他们说我没钱了

而把借钱的人记下来的小本本就是这里 Dep 实例里的subs

这里 Dep 的实例中的 subs 搜集的依赖就是 watcher 了,它是 Watcher 的实例,将来用来通知更新

2.4 Watcher

get 方法中执行的 getter 就是在一开始new渲染watcher时传入的 updateComponent = () => { vm._update(vm._render(), hydrating) },这个方法首先 vm._render() 生成渲染VNode树,在这个过程中完成对当前Vue实例 vm 上的数据访问,触发相应一众响应式对象的 getter,然后 vm._update()patch

注意这里的 get 方法最后执行了 getAndInvoke,这个方法首先遍历watcher中存的 deps,移除 newDep 中已经没有的订阅,然后 depIds = newDepIds; deps = newDeps ,把 newDepIdsnewDeps 清空。每次添加完新的订阅后移除旧的已经不需要的订阅,这样在某些情况,比如 v-if 已不需要的模板依赖的数据发生变化时就不会通知watcher去 update

2.5 小结

整个收集的流程大约是这样的,可以对照着上面的流程看一下


watcher 有下面几种使用场景:

  • render watcher 渲染 watcher,渲染视图用的 watcher
  • computed watcher 计算属性 watcher,因为计算属性即依赖别人也被人依赖,因此也会持有一个 Dep 实例
  • watch watcher 侦听器 watcher

只要会被别的观察者 (watchers) 依赖,比如data、data的属性、计算属性、props,就会在闭包里生成一个 Dep 的实例 dep 并在被调用 getter 的时候 dep.depend 收集它被谁依赖了,并把被依赖的watcher存放到自己的subs中 this.subs.push(sub),以便在自身改变的时候通知 notify 存放在 dep.subs 数组中依赖自己的 watchers 自己改变了,请及时 update ~

只要依赖别的响应式化对象的对象,都会生成一个观察者 watcher ,用来统计这个 watcher 依赖了哪些响应式对象,在这个 watcher 求值前把当前 watcher 设置到全局 Dep.target,并在自己依赖的响应式对象发生改变的时候及时 update


本文是系列文章,随后会更新后面的部分,共同进步~

  1. Vue源码阅读 – 文件结构与运行机制
  2. Vue源码阅读 – 依赖收集原理
  3. Vue源码阅读 – 批量异步更新与nextTick原理

网上的帖子大多深浅不一,甚至有些前后矛盾,在下的文章都是学习过程中的总结,如果发现错误,欢迎留言指出~

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部