数据响应式是在学习Vue时最需要关注的内容之一，也是面试的高频考点，值得我们去深入学习
在学习第三节时，我们注意到，在初始化数据（initData）时，存在observe(data, true)类似的处理，顾名思义，这里就是数据响应式的入口了。
0. initData
// core/instance/state.js
function initData (vm) {
let data = vm.$options.data
data = vm._data = typeof data === 'function'
// getData 进行错误处理，不做深入了解了
? getData(data, vm)
: data || {}
if (!isPlainObject(data)) {
data = {}
}
const keys = Object.keys(data)
const props = vm.$options.props
const methods = vm.$options.methods
let i = keys.length
while (i--) {
const key = keys[i]
// 如果key没有在props和methods并且不是保留值，进行代理
proxy(vm, `_data`, key)
}
// 响应式处理
observe(data, true /* asRootData */)
}
1. observe
// core/observer/index.js
export function observe (value, asRootData) {
// 如果不是对象或者是一个VNode，不做处理
if (!isObject(value) || value instanceof VNode) {
return
}
let ob
// 响应式的内容存放在 __ob__ 中，如果存在直接取值
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
) {
// 对value做响应式处理
ob = new Observer(value)
}
// 如果使用该ob作为root·，记录加一
if (asRootData && ob) {
ob.vmCount++
}
return ob
}
2. Observe
export class Observer {
value: any;
dep: Dep;
vmCount: number;
constructor (value) {
this.value = value
this.dep = new Dep()
this.vmCount = 0
// 设置this.__ob__指向该对象
def(value, '__ob__', this)
// 如果是数组
if (Array.isArray(value)) {
if (hasProto) {
// 含有__proto__，直接覆盖其__proto__
protoAugment(value, arrayMethods)
} else {
// 向下兼容
copyAugment(value, arrayMethods, arrayKeys)
}
// 响应式数组
this.observeArray(value)
} else {
// 响应式对象
this.walk(value)
}
}
walk (obj) {
const keys = Object.keys(obj)
// 遍历并进行响应式处理
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i])
}
}
observeArray (items) {
// 暴力遍历，实际性能不佳
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i])
}
}
}
// 覆盖原型链
function protoAugment (target, src) {
target.__proto__ = src
}
// 如果是不兼容的浏览器，那就不讲道理直接遍历并定义
function copyAugment (target, src, keys) {
for (let i = 0, l = keys.length; i < l; i++) {
const key = keys[i]
def(target, key, src[key])
}
}
熟悉Vue的同学们都了解，Vue对数组的增删API进行了特定的改造，实际上就是以protoAugment的方式对数组的原型链进行了覆盖
3. arrayMethods
// core/obserber/array.js
import { def } from '../util/index'
const arrayProto = Array.prototype
// 复制原型链
export const arrayMethods = Object.create(arrayProto)
// 以下7个方法会对数组的原数据进行修改
const methodsToPatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
// 循环遍历修改原型链内容
methodsToPatch.forEach(function (method) {
const original = arrayProto[method]
def(arrayMethods, method, function mutator (...args) {
// 对原型覆盖的第一件事，理应是执行原方法
const result = original.apply(this, args)
// 取出该数组的响应式处理数据
const ob = this.__ob__
let inserted
// 下面三个方法，对数组会进行添加
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
// 如果有新添加的数据，需要重新进行响应式处理
if (inserted) ob.observeArray(inserted)
// 更新数据
ob.dep.notify()
return result
})
})
4. defineReactive
// shallow是否为浅层响应式
export function defineReactive (obj, key, val, customSetter, shallow) {
// 可以理解为依赖库，存放所有与该key相关的watcher
const dep = new Dep()
// 获取该属性的描述符，以便后续判断和覆盖
const property = Object.getOwnPropertyDescriptor(obj, key)
// 如果该属性不可配置，当然直接返回
if (property && property.configurable === false) {
return
}
// 获取原先定义的get，set
const getter = property && property.get
const setter = property && property.set
if ((!getter || setter) && arguments.length === 2) {
// 赋值
val = obj[key]
}
// 如果val是对象，也需要进行响应式处理
let childOb = !shallow && observe(val)
// 覆盖该key的属性方法，进行依赖收集以及触发依赖处理
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
// 如果本身就定义了getter，执行它取值
const value = getter ? getter.call(obj) : val
// 如果实例上有Dep.target的值，其值实际上是Watcher
if (Dep.target) {
// 将watcher存入dep中
dep.depend()
// 如果有子ob
if (childOb) {
// 子ob也需要和对watcher进行依赖收集
childOb.dep.depend()
// 如果该值是数组
if (Array.isArray(value)) {
// 遍历该数组，数组中每一个key的dep都与该watcher进行依赖
dependArray(value)
}
}
}
return value
},
set: function reactiveSetter (newVal) {
// 直接获取值或返回getter的值
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)
// 触发依赖，与更新流程相关，本节不考虑
dep.notify()
}
})
}
function dependArray (value) {
for (let e, i = 0, l = value.length; i < l; i++) {
e = value[i]
// 取出数组每个值的dep，将watcher存入
e && e.__ob__ && e.__ob__.dep.depend()
if (Array.isArray(e)) {
dependArray(e)
}
}
}
以上是初始化中响应式的处理过程，眼尖的小伙伴可能发现了很多不熟悉的内容，Dep.target是什么，和dep.depend dep.notify又有什么关系？接下来，我们来讲解一下watcher和dep的相关内容。
5. Dep
export default class Dep {
static target: ?Watcher;
id: number;
subs: Array<Watcher>;
constructor () {
this.id = uid++
this.subs = []
}
addSub (sub: Watcher) {
this.subs.push(sub)
}
removeSub (sub: Watcher) {
remove(this.subs, sub)
}
depend () {
if (Dep.target) {
// Dep.target === watcher
Dep.target.addDep(this)
}
}
notify () {
const subs = this.subs.slice()
for (let i = 0, l = subs.length; i < l; i++) {
// subs[i] === watcher
subs[i].update()
}
}
}
dep实际上很简单，他就是一个为当前值存放所有相关watcher的类，有添加，删除，依赖收集，提醒更新的作用
6. Watcher
export default class Watcher {
// 对应Dep中的Dep.target.addDep(Dep)，目的在于使watcher与dep对应的key相关联，每个watcher与每个dep都是强关联的，可以互相找到依赖
addDep (dep: Dep) {
const id = dep.id
// 去重
if (!this.newDepIds.has(id)) {
// 添加dep
this.newDepIds.add(id)
this.newDeps.push(dep)
if (!this.depIds.has(id)) {
对应Dep.addSub(Watcher)，在dep中添加watcher
dep.addSub(this)
}
}
}
// 对应subs[i].update
update () {
// 如果是lazy的，那么证明该值为computed，即取缓存的值，具体情况可以看我的初始化第三节的3.4.2
if (this.lazy) {
this.dirty = true
} else if (this.sync) {
// 如果设置了sync，同步执行
this.run()
} else {
// 大多情况下会从这里执行，与更新相关，之后的章节会说到
queueWatcher(this)
}
}
// computed重新取值
evaluate () {
this.value = this.get()
this.dirty = false
}
// 依赖收集
depend () {
let i = this.deps.length
while (i--) {
this.deps[i].depend()
}
}
}
Watcher的很多相关内容都与更新息息相关，关于更新后续我也会在我的源码讲述中提到，因此不多做解释了。
可能看到这里大家还是对更新有点云里雾里，我再简述一下整体的流程。在初始化的时候，我们对数据对象进行了响应式处理，覆盖了其get，set方法，在get时我们收集依赖，set时触发依赖。但是注意哦，此时我们只是进行了响应式处理，但是仔细看会发现，我们并没有取调用，也就是执行这些get，这些get是在什么时候调用的呢？聪明的小伙伴可能已经想到了，就是在我们挂载的阶段，也就是$mount时，我们才会进行调用。
在Vue2中，一般来说一个组件对应一个Watcher，但是也有用户级Watcher，也就是我们平时写在代码里面的自定义的Watcher。
还有一个难点在以下代码，来自第四点的defineReactive
let childOb = !shallow && observe(val)
// 如果有子ob
if (childOb) {
// 子ob也需要和对watcher进行依赖收集
childOb.dep.depend()
}
在Vue中，有$set这么一个特别的方法，而如果我们只是对该key进行响应式处理的话，显然，我们并不能添加相应的属性在该key中。所以，Vue源码中的这些内容就是为了解决这个问题。首先，我们对val进行响应式的处理，如果存在的话，则它是一个对象类型，这整个对象也会有一个单独的dep，添加watcher进入后，那么这个对象也和他有了依赖。总而言之，对象的key有一个dep，管理这个key的内容，但是不能管理对象的增删，而整个对象也有一个dep，管理对象的添加或减少。
响应式处理是我们阅读源码是需要着重去理解的部分，理解它，你对Vue的理解与运用也将更上一层楼。
