一、vue的数据双向绑定的实现
响应式系统
一、概述
Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。
双向数据绑定，简单点来说分为三个部分：
1、Observer。这里的主要工作是递归地监听对象上的所有属性，在属性值改变的时候，触发相应的watcher。
2、Watcher。观察者，当监听的数据值修改时，执行响应的回调函数（Vue里面的更新模板内容）。
3、Dep。连接Observer和Watcher的桥梁，每一个Observer对应一个Dep，它内部维护一个数组，保存与该Observer相关的Watcher。
Object.defineProperty，Vue.js就是基于它实现「响应式系统」
Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者(dep)，在数据变更的时候通知订阅者更新视图。
/*
obj: 目标对象
prop: 需要操作的目标对象的属性名
descriptor: 描述符
return value 传入对象
*/
Object.defineProperty(obj, prop, descriptor)
enumerable，属性是否可枚举，默认 false。
configurable，属性是否可以被修改或者删除，默认 false。
get，获取属性的方法。
set，设置属性的方法
响应系统的实现
function observe(value, cb) {
Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))
}
function defineReactive (obj, key, val, cb) {
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: ()=>{
/*....依赖收集等....*/
/*Github:https://github.com/answershuto*/
},
set:newVal=> {
cb();/*订阅者收到消息的回调*/
}
})
}
class Vue {
constructor(options) {
this._data = options.data;
observe(this._data, options.render)
}
}
let app = new Vue({
el: '#app',
data: {
text: 'text',
text2: 'text2'
},
render(){
console.log("render");
}
})
二、依赖收集
为什么要依赖收集
先看下面这段代码
new Vue({
template:
`<div>
<span>text1:</span> {{text1}}
<span>text2:</span> {{text2}}
<div>`,
data: {
text1: 'text1',
text2: 'text2',
text3: 'text3'
}
});
按照之前响应式原理中的方法进行绑定则会出现一个问题——text3在实际模板中并没有被用到，然而当text3的数据被修改的时候（this.text3 = 'test'）的时候，同样会触发text3的setter导致重新执行渲染，这显然不正确。
先说说Dep
当对data上的对象进行修改值的时候会触发它的setter，那么取值的时候自然就会触发getter事件，所以我们只要在最开始进行一次render，那么所有被渲染所依赖的data中的数据就会被getter收集到Dep的subs中去。在对data中的数据进行修改的时候setter只会触发Dep的subs的函数。
定义一个依赖收集类Dep。
class Dep () {
constructor () {
this.subs = [];
}
addSub (sub: Watcher) {
this.subs.push(sub)
}
removeSub (sub: Watcher) {
remove(this.subs, sub)
}
/*Github:https://github.com/answershuto*/
notify () {
// stabilize the subscriber list first
const subs = this.subs.slice()
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
}
}
Watcher
订阅者，当依赖收集的时候会addSub到sub中，在修改data中数据的时候会触发dep对象的notify，通知所有Watcher对象去修改对应视图。
class Watcher () {
constructor (vm, expOrFn, cb, options) {
this.cb = cb;
this.vm = vm;
/*在这里将观察者本身赋值给全局的target，只有被target标记过的才会进行依赖收集*/
Dep.target = this;
/*Github:https://github.com/answershuto*/
/*触发渲染操作进行依赖收集*/
this.cb.call(this.vm);
}
update () {
this.cb.call(this.vm);
}
}
开始依赖收集
class Vue {
constructor(options) {
this._data = options.data;
observer(this._data, options.render);
let watcher = new Watcher(this, );
}
}
function defineReactive (obj, key, val, cb) {
/*在闭包内存储一个Dep对象*/
const dep = new Dep();
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: ()=>{
if (Dep.target) {
/*Watcher对象存在全局的Dep.target中*/
dep.addSub(Dep.target);
}
},
set:newVal=> {
/*只有之前addSub中的函数才会触发*/
dep.notify();
}
})
}
Dep.target = null;
将观察者Watcher实例赋值给全局的Dep.target，然后触发render操作只有被Dep.target标记过的才会进行依赖收集。有Dep.target的对象会将Watcher的实例push到subs中，在对象被修改出发setter操作的时候dep会调用subs中的Watcher实例的update方法进行渲染。
三、完整的小例子
第一部分是Observer。
function Observer(obj, key, value){
var dep = new Dep();
if (Object.prototype.toString.call(value) == '[object Object]') {
Object.keys(value).forEach(function(key){
new Observer(value,key,value[key])
})
};
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function(){
if (Dep.target) {
dep.addSub(Dep.target);
};
return value;
},
set: function(newVal){
value = newVal;
dep.notify();
}
})
}
我们先略过对数组的处理等。递归地为obj的每个属性添加getter和setter。在getter中，我们把watcher添加到dep中。setter中，触发watcher执行回调。
第二部分是Watcher。
function Watcher(fn){
this.update = function(){
Dep.target = this;
fn();
Dep.target = null;
}
this.update();
}
极其简单的几行代码，fn是数据变化后要执行的回调函数，一般是获取数据渲染模板。默认执行一遍update方法是为了在渲染模板过程中，调用数据对象的getter时建立两者之间的关系。因为同一时刻只有一个watcher处于激活状态，把当前watcher绑定在Dep.target（方便在Observer内获取）。回调结束后，销毁Dep.target。
最后是Dep。
function Dep(){
this.subs = [];
this.addSub = function (watcher) {
this.subs.push(watcher);
}
this.notify = function(){
this.subs.forEach(function(watcher){
watcher.update();
});
}
}
内部一个存放watcher的数组subs。addSub用于向数组中添加watcher(getter时)。notify用于触发watcher的更新(setter时)。
以上就是我们简易的双向数据绑定demo。我们看看用起来是什么样的。
<div id="test"></div>
<script type="text/javascript">
var obj = {
a: 1,
b: 2,
c: 3
}
Object.keys(obj).forEach(function(key){
new Observer(obj, key, obj[key])
});
new Watcher(function(){
document.querySelector("#test").innerHTML = obj.a;
})
</script>
首先，我们给obj的每一个属性都添加getter和setter。创建一个Watcher对象，回调函数是使#test的内容为obj.a，这里是1。
打开控制太，我们修改obj.a == 22。我们发现页面中显示的内容也变成了22。相关代码见这里。
以上知识我们的开胃小菜，Vue中对数组做了处理，而且页面的更新是异步执行的，所以会有许许多多的处理，接下来我们慢慢分解。
四、Vue的实现
我们先看一张图，这是Vue文档中的一张图，解释的就是Vue的响应式原理。
整体上和我们之前的demo一样，我们之前说过，Vue的更新是生成render函数，然后生成虚拟dom，映射到页面上。左侧的部分其实就是我们watcher的回调，右下角的data就是通过我们上面说的Observer来添加getter和setter。watcher通过dependency和data联系在一起，并触发re-render。
Vue中的Observer
接着，我们来看源码，打开src/core/observer/index.js。
首先是我们的Observer对象。
export class Observer {
value: any;
dep: Dep;
vmCount: number; // 把该对象作为root $data的vm个数
constructor (value: any) {
this.value = value
this.dep = new Dep()
this.vmCount = 0
// 添加__ob__来标示value有对应的Observer
def(value, '__ob__', this)
// 对数组的处理
if (Array.isArray(value)) {
const augment = hasProto
? protoAugment
: copyAugment
augment(value, arrayMethods, arrayKeys)
this.observeArray(value)
// 处理对象
} else {
this.walk(value)
}
}
// 给每个属性添加getter/setters
walk (obj: Object) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i], obj[keys[i]])
}
}
// 观察数组的每一项
observeArray (items: Array<any>) {
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i])
}
}
}
整体上，value分为对象或数组两种情况。在这之前，我们先来说一下defineReactive和observe这两个比较重要的函数。
export function defineReactive (
obj: Object,
key: string,
val: any,
customSetter?: Function
) {
const dep = new Dep()
const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) {
return
}
const getter = property && property.get
const setter = property && property.set
let childOb = observe(val)
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
/* eslint-disable no-self-compare */
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
if (process.env.NODE_ENV !== 'production' && customSetter) {
customSetter()
}
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
childOb = observe(newVal)
dep.notify()
}
})
}
这个方法，是具体为obj的key值添加装饰器的地方。它会为每个值创建一个dep，如果用户为这个值传入getter和setter，则暂时保存。observe方法稍后介绍。之后通过Object.defineProperty，重新添加装饰器。在getter中，dep.depend其实做了两件事，一是向Dep.target内部的deps添加dep，二是将Dep.target添加到dep内部的subs，也就是建立它们之间的联系。在setter中，如果新旧值相同，直接返回，不同则调用dep.notify来更新与之相关的watcher。customSetter在开发过程中输出错误用。
export function observe (value: any, asRootData: ?boolean): Observer | void {
if (!isObject(value)) {
return
}
let ob: Observer | void
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
ob = value.__ob__
} else if (
observerState.shouldConvert &&
!isServerRendering() &&
(Array.isArray(value) || isPlainObject(value)) &&
Object.isExtensible(value) &&
!value._isVue
) {
ob = new Observer(value)
}
if (asRootData && ob) {
ob.vmCount++
}
return ob
}
该方法用于观察一个对象，返回与对象相关的Observer对象，如果没有则为value创建一个对应的Observer。defineReactive中调用该方法，其实就是为所有value为对象的值递归地观察。
我们再回到Observer，如果传入的是对象，我们就调用walk，该方法就是遍历对象，对每个值执行defineReactive。
另一种情况是传入的对象是数组，因为数组本身只引用了一个地址，所以对数组进行push、splice、sort等操作，我们是无法监听的。所以，Vue中改写value的__proto__（如果有），或在value上重新定义这些方法。augment在环境支持__proto__时是protoAugment，不支持时是copyAugment。
function protoAugment (target, src: Object) {
target.__proto__ = src
}
function copyAugment (target: Object, src: Object, keys: Array<string>) {
for (let i = 0, l = keys.length; i < l; i++) {
const key = keys[i]
def(target, key, src[key])
}
}
protoAugment很简单，其实就是执行了value.__proto__ = arrayMethods。
copyAugment中循环把arrayMethods上的arrayKeys方法添加到value上。
arrayMethods其实是改写了数组方法的新对象。arrayKeys是arrayMethods中的方法列表。我们一起来看看arrayMethods。
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)
;[
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
.forEach(function (method) {
const original = arrayProto[method]
def(arrayMethods, method, function mutator () {
let i = arguments.length
const args = new Array(i)
while (i--) {
args[i] = arguments[i]
}
const result = original.apply(this, args)
const ob = this.__ob__
let inserted
switch (method) {
case 'push':
inserted = args
break
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
if (inserted) ob.observeArray(inserted)
ob.dep.notify()
return result
})
})
整体上其实还是调用数组相应的方法来操作value，只不过操作之后，添加了相关watcher的更新。这里解释一下为什么push、unshift、splice参数大于2时，要重新调用ob.observeArray，因为这三种情况都是像数组中添加新的元素，所以需要重新观察每个子元素。
Vue中的Dep
let uid = 0
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 () {
const subs = this.subs.slice()
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
}
}
Dep对象比较简单，内部有一个为一个id，用于作为Dep对象的唯一标识，还有一个保存watcher的数组subs。相比于我们之前的小demo，这里多了removeSub和depend。removeSub是从数组中移除某一watcher，depend是调用了watcher的addDep，等会讲解。
Vue中的Watcher
let uid = 0
export default class Watcher {
constructor (
vm: Component,
expOrFn: string | Function,
cb: Function,
options?: Object
) {
this.vm = vm
vm._watchers.push(this)
...
this.cb = cb
this.id = ++uid
...
this.expression = process.env.NODE_ENV !== 'production'
? expOrFn.toString()
: ''
if (typeof expOrFn === 'function') {
this.getter = expOrFn
} else {
this.getter = parsePath(expOrFn)
if (!this.getter) {
this.getter = function () {}
}
}
this.value = this.get()
}
get () {
pushTarget(this)
let value
const vm = this.vm
...
value = this.getter.call(vm, vm)
...
popTarget()
this.cleanupDeps()
return value
}
...
update () {
...
queueWatcher(this)
}
run () {
if (this.active) {
const value = this.get()
if (
value !== this.value ||
isObject(value) ||
this.deep
) {
// set new value
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)
}
}
}
}
...
}
这里我们只说最普通的情况，deep、lazy等就不多说了，大家有时间自己看一看就行。
创建Watcher对象时，有两个比较重要的参数，一个是expOrFn，一个是cb。
在Watcher创建时，会调用的this.get，里面会执行根据expOrFn解析出来的getter。在这个getter中，我们或渲染页面，或获取某个数据的值。总之，会调用相关data的getter，来建立数据的双向绑定。
当相关的数据改变时，会调用watcher的update方法，进而调用run方法。我们看到，run中还会调用this.get来获取修改之后的value值。update中的queueWatcher方法稍后解释。
我们先来看看Watcher的两种主要用途：一种是更新模板，另一种就是监听某个值的变化。
** 模板更新 **
我们之前讲Vue声明周期时讲到挂载元素时，我们是通过创建Watcher对象，然后调用updateComponent来更新渲染模板的。
vm._watcher = new Watcher(vm, updateComponent, noop)
这是因为创建Watcher会调用this.get，也就是这里的updateComponent。在render的过程中，会调用data的getter方法，以此来建立数据的双向绑定，当数据改变是，会重新触发updateComponent。在这里this.get的返回值是undefined，所以主要是用于渲染模板。
** 监听数据 **
另一个用途就是我们的computed、watch等，即监听数据的变化来执行响应的操作。
此时this.get返回的是要监听数据的值。初始化过程中，调用this.get会拿到初始值保存为this.value，监听的数据改变后，会再次调用this.get并拿到修改之后的值，将旧值和新值传给cb并执行响应的回调。
接下来我们谈谈queueWatcher，从函数名我们大致可以猜出，它是把当前的watcher添加到一个队列中。我们知道，Vue中页面的更新是异步的，所以一系列数据的变化，会在之后的某一时刻统一更新。我们来看看该方法的代码。
export function queueWatcher (watcher: Watcher) {
const id = watcher.id
if (has[id] == null) {
has[id] = true
if (!flushing) {
queue.push(watcher)
} else {
// if already flushing, splice the watcher based on its id
// if already past its id, it will be run next immediately.
let i = queue.length - 1
while (i >= 0 && queue[i].id > watcher.id) {
i--
}
queue.splice(Math.max(i, index) + 1, 0, watcher)
}
// queue the flush
if (!waiting) {
waiting = true
nextTick(flushSchedulerQueue)
}
}
}
我们的watcher有从小到大的唯一id，在页面更新时，会按照一定的顺序依次更新，这里做了一个判断，如果watcher列表正在更新，则把新的watcher添加到对应的位置，并更新。否则，在下一个nextTick中执行flushSchedulerQueue。
function flushSchedulerQueue () {
flushing = true
let watcher, id, vm
queue.sort((a, b) => a.id - b.id)
for (index = 0; index < queue.length; index++) {
watcher = queue[index]
id = watcher.id
has[id] = null
watcher.run()
}
const oldQueue = queue.slice()
resetSchedulerState() // 重置队列
index = oldQueue.length
while (index--) {
watcher = oldQueue[index]
vm = watcher.vm
if (vm._watcher === watcher && vm._isMounted) {
callHook(vm, 'updated')
}
}
}
该方法首先按照从小到大将watcher排序，并依次执行它的run方法。vm._watcher保存的是渲染模板时创建的watcher，所以如果队列中有该watcher，则说明模板有变化，随之调用'updated'钩子函数。
Watcher对象中还有一些销毁watcher等方法，这里就不再赘述，感兴趣的大家可以自己看一看。
