回顾

如果有感兴趣的同学可以看看我之前的源码分析文章，这里呈上链接：《Vue源码分析系列：目录》

写在前面

这一篇我们先不着急阅读源码，因为接下来需要用到一个比较复杂的设计模式：观察者模式，而且还需要理解依赖收集和派发更新才能继续向下阅读源码，所以这次我们先做一个铺垫。

依赖收集

通过之前阅读的源码我们了解到Vue2.x版本的响应式是依靠Object.defineProperty这个API来进行对象的劫持，当对象进行取值和赋值操作的时候，都可以进行一些另外的操作。在get过程中，也就是对象的取值，Vue做的操作是：依赖收集。
那么什么是依赖？
这里我们举一个例子:

<template><div class="demo">{{message}}</div>
</template><script>
export default {name:"demo",data:() => ({message:"hello"})
}
</script>

在Vue的1.x版本中，对于依赖的定义分的很细，包括了模板元素上的{{message}}和组件demo；而在2.x的版本中，以上面这个例子为例,data中的message被demo组件依赖了。

在对data进行响应式构造的时候，需要使用依赖收集器将所有data的依赖收集起来。
在Vue中的依赖收集器的具体表现形式就是Dep类。

所以在data改变过程中，依赖收集器会通知这些依赖于data的项去触发更新。

`class Dep`

Dep类的具体作用是在数据的get过程中，收集数据的相关依赖项，用于之后的更新依赖操作。

其实在数据和依赖的中间还夹着一层，就是订阅者，订阅者的作用就是在数据的set过程中触发订阅者的通知方法，从而让订阅者去通知依赖更新。

所以，Dep实例的不会直接存放依赖项，Dep实例存放的其实是各个依赖项对应的watcher实例，由watcher实例去调用对应依赖项的更新。

在Vue中，订阅者的具体表现形式就是Watcher类。

`class Watcher`

Watcher是一个观察者类。
Watcher也会存储Dep，因为一个依赖项可能会依赖多个被依赖项，如一个Computed可能会使用到多个data。当其中任意一个被依赖项发生改变时，Watcher就会去通知相关依赖项的更新。
watcher类的通知依靠的是update方法，这个update方法就是主动去触发依赖的更新。那么这个update方法是怎么触发的呢？
在数据发生变化时，会调用Dep实例的notify方法，这个notify方法会去在自身实例上寻找依赖列表，这个依赖列表里面都是一个个的watcher，之后notify方法会遍历这个列表，逐个触发watcher的update方法。

也就是说，真正的数据更新顺序是这样的:
配置data的响应式 -------> 实例化对应依赖的watcher -------> 触发get -------> 由Dep去收集相关的watcher ------->watcher收集当前的Dep -------> 页面交互 -------> 触发set -------> Dep通知watcher更新 -------> watcher更新依赖项。

官方的流程图

官方的图这里在data和watcher中间少了一个Dep，其实图中的Notify和Collect as Despendency都是由Dep实例做的。（可能是为了便于理解吧，故意省略了Dep类）

总结

Vue响应式原理的难点其实就在于Dep和Watcher。
Dep存储了多个Watcher，Watcher又会存储多个Dep，是一个复杂的多对多的关系，这个在之后介绍computed原理时会体现得更加明显。
理解了Dep和Watcher类的关系，对我们接下来阅读源码有非常大的帮助。

Vue源码解析系列——响应式原理篇：理解Dep类和Watcher类相关推荐

Vue源码解析系列——数据驱动篇：patch的执行过程
准备 vue版本号2.6.12,为方便分析,选择了runtime+compiler版本. 回顾如果有感兴趣的同学可以看看我之前的源码分析文章,这里呈上链接:<Vue源码分析系列:目录> ...
data access components 2.0未响应_Vue2.x 源码剖析之响应式原理
# Study Notes 本博主会持续更新各种前端的技术,如果各位道友喜欢,可以关注.收藏.点赞下本博主的文章. Vue.js 源码剖析-响应式原理响应式处理的入口 src/core/insta ...
vue源码之视图响应式更新
prometheus变量_TiKV 源码解析系列文章（四）Prometheus（下）
本文为 TiKV 源码解析系列的第四篇,接上篇继续为大家介绍 rust-prometheus.上篇主要介绍了基础知识以及最基本的几个指标的内部工作机制,本篇会进一步介绍更多高级功能的实现原理. 与上篇 ...
Vue源码解析（尚硅谷）
视频地址:Vue源码解析系列课程一.Vue源码解析之mustache模板引擎 1. 什么是模板引擎模板引擎是将数据要变为视图最优雅的解决方案历史上曾经出现的数据变为视图的方法 2. mustac ...
Vue源码解析之数组变异
力有不逮的对象众所周知,在 Vue 中,直接修改对象属性的值无法触发响应式.当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变. 这是什么原因? 原因在于: Vue 的响应式 ...
vue 计算属性_lt;Vue 源码笔记系列6gt;计算属性 computed 的实现
1. 前言原文发布在语雀: <Vue 源码笔记系列6>计算属性 computed 的实现 · 语雀www.yuque.com 上一章我们已经学习过 watch,这一章就来看一下计算属性 ...
openGauss数据库源码解析系列文章--openGauss简介（一）
openGauss数据库是华为深度融合在数据库领域多年经验,结合企业级场景要求推出的新一代企业级开源数据库.此前,Gauss松鼠会已经发布了openGauss数据库核心技术系列文章,介绍了openGa ...
Vue源码解析(一)
前言:接触vue已经有一段时间了,前面也写了几篇关于vue全家桶的内容,感兴趣的小伙伴可以去看看,刚接触的时候就想去膜拜一下源码~可每次鼓起勇气去看vue源码的时候,当看到几万行代码的时候就直接望而却 ...
TiKV 源码解析系列文章（二）raft-rs proposal 示例情景分析
作者:屈鹏本文为 TiKV 源码解析系列的第二篇,按照计划首先将为大家介绍 TiKV 依赖的周边库 raft-rs .raft-rs 是 Raft 算法的 Rust 语言实现.Raft 是分布式领域 ...

Vue源码解析系列——响应式原理篇：理解Dep类和Watcher类

回顾