浅析Vue相应式道理（一）
Vue的特性之一是相应式，视图跟着数据的更新而更新，在视图中修正数据后Vue实例中的数据也会同步更新。内部借助依靠(下文中的Dep类)来完成，数据的猎取（即get操纵）会触发网络依靠，而对数据赋值（即set操纵）会关照依靠数据更新，从新衬着视图。对数据的get/set操纵的阻拦借助的是ES5的Object.defineProperty。
整体架构简介
在Vue源码内，Dep类作为依靠，Watcher类则用来网络依靠和关照依靠从新求值。关于在实例化时传入的数据，运用工场函数defineReactive令其相应式。而在实例后再经由历程Vue.set/vm.$set增加的相应式数据，则须要借助Observer类来使其成为相应式数据，末了也是经由历程defineReactive完成相应式。
关于每一个相应式数据，会有两个Dep实例，第一个是在defineReactive中的闭包遍历，用途不言而喻。而第二个Dep则在相应式数组的__ob__属性值中，这个值是Observer实例，其实例属性dep是Dep实例，在实行Vue.set/vm.$set增加相应式数据后，会关照依靠更新。
在讲defineReactive之前，先讲一下这些辅佐类的完成和用途。
Dep
我们都晓得，Vue相应式的完成，会在getter中网络相应式数据的依靠，在setter中关照依靠数据更新，从新盘算数据然厥后更新视图。在Vue内部，运用Dep实例示意依靠，让我们看一下Dep类是怎样定义的。
Dep有两个实例属性，一个静态属性。静态属性target是Watcher实例，功用是从新求值和关照视图更新，下文我们会讲到。实例属性id是Dep实例的唯一标识，无需多说；属性subs是Watcher实例数组，用于网络Watcher实例，当依靠更新时，这些Watcher实例就会从新求值。
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.addDep(this)
}
}
notify () {
// stabilize the subscriber list first
const subs = this.subs.slice()
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
}
}要领addSub用于增加Watcher实例到subs中，要领removeSub用于从subs移除Watcher实例。
要领depond会在网络依靠的时刻挪用，现实上实行了Watcher的实例要领addDep，在addDep内除了挪用dep实例的addSup要领外，还做了防止反复网络Watcher实例的事情。这个要领会在Vue为相应式数据设置的自定义getter中实行。
notify要领则遍历subs，实行Watcher实例要领update来从新求值。这个要领会在Vue为相应式数据设置的自定义setter中实行。
有人能够有疑问，target是静态属性，那不是每一个实例的target都一样的？现实上，从新求值的操纵在Watcher实例要领get内完成。在get要领内，会先挪用pushTarget来更新Dep.target，使其指向当前Watcher实例，之前的`Dep.target会被保留targetStack末端（相当于入栈操纵），完成操纵后会实行popTarget函数，从targetStack掏出末了一个元夙来回复Dep.target（相当于出栈操纵）。
Dep.target = null
const targetStack = []
export function pushTarget (_target: ?Watcher) {
if (Dep.target) targetStack.push(Dep.target)
Dep.target = _target
}
export function popTarget () {
Dep.target = targetStack.pop()
}Watcher
当依靠更新时，Watcher类会从新求值，并能够触发重衬着。
constructor (
vm: Component,
expOrFn: string | Function,
cb: Function,
options?: ?Object,
isRenderWatcher?: boolean
) {
this.vm = vm
// 与衬着相干的watcher
if (isRenderWatcher) {
vm._watcher = this
}
vm._watchers.push(this)
// options
if (options) {
this.deep = !!options.deep
this.user = !!options.user
this.computed = !!options.computed
this.sync = !!options.sync
this.before = options.before
} else {
this.deep = this.user = this.computed = this.sync = false
}
this.cb = cb
this.id = ++uid // uid for batching
this.active = true
this.dirty = this.computed // for computed watchers
this.deps = []
this.newDeps = []
this.depIds = new Set()
this.newDepIds = new Set()
this.expression = process.env.NODE_ENV !== 'production'
? expOrFn.toString()
: ''
// parse expression for getter
if (typeof expOrFn === 'function') {
this.getter = expOrFn
} else {
this.getter = parsePath(expOrFn)
if (!this.getter) {
this.getter = function () {}
process.env.NODE_ENV !== 'production' && warn(
`Failed watching path: "${expOrFn}" ` +
'Watcher only accepts simple dot-delimited paths. ' +
'For full control, use a function instead.',
vm
)
}
}
if (this.computed) {
this.value = undefined
this.dep = new Dep()
} else {
this.value = this.get()
}
}组织函数吸收五个参数，vm是挂载的Component实例；expOrFn是视察的属性，当是字符串时示意属性名，是函数时会被当做属性的get要领；cb是属性更新后实行的回调函数；options是设置项；isRenderWatcher示意当前实例是不是与衬着相干。
在组织函数内，先将实例属性vm指向传入的Component实例vm，假如当前Watcher实例与衬着相干，会将其保留在vm._watcher中。接着将当前实例增加到vm._watchers中，同时依据传入的设置项options初始化实例属性。实例属性getter是监听属性的getter函数，假如expOrFn是函数，直接赋值，不然会挪用parsePath来猎取属性的getter。
parsePath内部会先运用正则来推断属性名，假如有除数字、字母、.和$之外的字符时视为不法属性名，直接返回，所以属性只能是以.分开的属性。假如属性名正当，则parsePath返回一个闭包函数，挪用时会传入vm，即obj是vm的援用，这个闭包函数终究的目的是从vm实例里猎取属性。
const bailRE = /[^\w.$]/
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
}
}初始化完成以后，假如不是盘算属性相干的Watcher实例，会挪用实例要领get求值。
get要领
实行getter要领求值，完成依靠网络的历程。
要领开始时，实行pushTarget(this)，将Dep.target指向当前Watcher实例。然后实行getter网络依靠，末了将Dep.target回复，并实行cleanDeps遍历deps。在每次求值以后，都邑挪用cleanupDeps要领重置依靠，详细怎样重置，稍后再讲。
现实上，Dep.target指向的实例是即将要网络的目的。
getter的实行，除了会猎取值外，还会触发在defineReactive中为属性设置的getter，完成依靠的网络。
get () {
pushTarget(this)
let value
const vm = this.vm
try {
value = this.getter.call(vm, vm)
} catch (e) {
if (this.user) {
handleError(e, vm, `getter for watcher "${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
}addDep
addDep的功用是将当前Watcher实例增加到传入的Dep实例属性subs数组里去。
addDep吸收一个Dep实例作为参数，假如 dep.id 没有在鸠合 newDepIds 当中，则增加。假如不在鸠合 depIds 中，则将当前实例增加到 dep.subs 中。 简朴来讲，这里的操纵会防止反复网络依靠，这也是不直接挪用dep.addSub(Dep.target)的缘由。
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)) {
dep.addSub(this)
}
}
}从这里能够看出来Dep实例和Watcher实例会互相援用。Dep实例将Watcher实例保留在实例属性subs中，在相应式属性挪用setter时，实行notify要领，关照Watcher实例从新求值。
Watcher实例将Dep实例保留在鸠合newDeps，目的是防止反复网络依靠，同时会实行Dep实例要领addDep,将当前Watcher实例增加到Dep实例属性subs中。
cleanupDeps
关于Watcher来讲，每次求值的依靠并不一定与上一次的雷同，在每次实行get以后，都邑挪用cleanupDeps来重置网络的依靠。Watcher有四个实例属性用于纪录依靠，分别是newDeps/newDepIds与deps/depIds。newDeps与deps是保留依靠的数组，newDepIds与depIds是保留依靠Id的鸠合。纪录上一次求值依靠的属性是deps/depIds，纪录下一次求值依靠的属性是newDeps/newDepIds（实行cleanupDeps时已挪用过getter从新求值了，所以说是上一次求值，下一次指的是下一次挪用get的时刻）。
cleanupDeps () {
let i = this.deps.length
while (i--) {
const dep = this.deps[i]
if (!this.newDepIds.has(dep.id)) {
dep.removeSub(this)
}
}
// 交流depIds和newDepIds
let tmp = this.depIds
this.depIds = this.newDepIds
this.newDepIds = tmp
this.newDepIds.clear()
// 交流deps和newDeps
tmp = this.deps
this.deps = this.newDeps
this.newDeps = tmp
this.newDeps.length = 0
}起首遍历deps，假如此次求值的依靠鄙人一次求值中并不存在，则须要挪用removeSub要领，从subs数组中移除当前Watcher实例。
接着交流newDeps/newDepIds与deps/depIds，并清空交流后的newDeps/newDepIds。
update
Dep类的notify要领用于关照视察者从新求值，该要领内部现实是遍历subs数组，实行Watcher的update要领。
update 要领定义以下。当实例与盘算属性相干时，xxx。假如不是盘算属性相干时，推断是不是须要同步触发，同步触发时挪用run，不然实行queueWatcher(this)，交由调理模块一致调理。
update () {
if (this.computed) {
if (this.dep.subs.length === 0) {
this.dirty = true
} else {
this.getAndInvoke(() => {
this.dep.notify()
})
}
} else if (this.sync) {
this.run()
} else {
queueWatcher(this)
}
}teardown
烧毁当前Watcher实例。$watch要领返回一个函数，函数内部就是Watcher实例挪用teardown要领。
先推断Watcher实例是不是在活泼状况。起首要从Vue实例的视察者行列_watchers中移除当前实例，假如vm正在烧毁，因为机能的题目会跳过这一操纵。接着遍历deps，作废这些Dep实例对当前Watcher实例的定阅。末了令this.active = false，示意当前Watcher实例已被烧毁。
teardown () {
if (this.active) {
// remove self from vm's watcher list
// this is a somewhat expensive operation so we skip it
// if the vm is being destroyed.
if (!this.vm._isBeingDestroyed) {
remove(this.vm._watchers, this)
}
let i = this.deps.length
while (i--) {
this.deps[i].removeSub(this)
}
this.active = false
}
}getAndInvoke
不论是同步或异步更新，或者是盘算属性相干的Wathcer实例，终究求值都是经由历程getAndInvoke要领。
getAndInvoke吸收一个回调函数，会在从新求值且值更新后实行。
当新值与当前值差别时会被判定为值已更新。当值是对象时且this.deep为真时也判定为值已更新，只管援用不发作转变，但其属性却能够发作变化，为防止属性发作转变而Watcher推断未更新的状况涌现。
getAndInvoke (cb: Function) {
const value = this.get()
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
this.dirty = false
if (this.user) {
try {
cb.call(this.vm, value, oldValue)
} catch (e) {
handleError(e, this.vm, `callback for watcher "${this.expression}"`)
}
} else {
cb.call(this.vm, value, oldValue)
}
}
}run
run要领内部只是对getAndInvoke的封装，传入的回调函数是实例化时传入的函数。实行之前会先推断Watcher实例是不是已弃用。
run () {
if (this.active) {
this.getAndInvoke(this.cb)
}
}小结
因为篇幅的缘由，本文只简朴剖析了辅佐类和工场函数的源码和功用。干巴巴地讲了这么多，如今来轻微捋一下。
Watcher类会保留相应式数据的getter函数，这个getter函数多是实例化参数expOrFn（当其是函数范例时），也多是实行parsePath(expOrFn)猎取到的getter函数。实例要领update对外暴露，用于从新求值，现实上实行真正求值操纵的get要领。要领addDep吸收一个Dep实例参数，在实行定阅操纵前还会实行两个if推断，防止反复定阅。
Dep类代表依靠，实例属性subs是Watcher数组，代表定阅了当前Dep实例的视察者实例，depond要领网络依靠，notify要领关照视察者实例从新求值。定阅列表中能够会有与衬着相干的视察者，所以能够会触发重衬着。
Observer类与Vue.set/vm.$set的联络比较大，所以剖析放在背面。
