Vue源代码笔记（一）数据绑定
VUE数据绑定介绍
数据绑定是vue的基础核心之一，本文以Vue对象（当然也包含VueComponent）里的data数据绑定为例，阐述整个绑定的过程。
Vue的数据绑定由三部分组成，
- Observer 监听Object里属性的变化，一旦有属性发生变化，会发布带有新值的通知。它是一个发布者的角色。
- Watcher 接收新值的通知，对新值进行处理，比如刷新控件值（如果控件值绑定data里的属性）。它是一个订阅者的角色。
- Dep Observer和Water的粘合剂。 Observer的通知是发给Dep，然后Dep再转发给Watcher。 而Watcher作为订阅者，不是直接注册在Observer里，而是Dep里。Dep可接收多个Watcher，一定程度来说也是个Watcher管理器。
以下是三者之间的关系图
以下是来自于Vue的本身自带的例子，由一个index.html和app.js组成。通过这个例子我们来看一下，整个数据绑定的过程。
index.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1.0">
6 <title>test</title>
7 </head>
8 <body>
9 <div id="app">
10 {{message}}
11 <button-counter></button-counter>
12 </div>
13 <!-- built files will be auto injected -->
14
15 <script src="../../dist/vue.js"></script>
16 <script src="app.js"></script>
17 </body>
18 </html>
app.js
1 Vue.component('button-counter', {
2 data: function () {
3 return {
4 count: 0,
5 }
6 },
7 methods:{
8 onClick:function(){
9 this.count++;
10 },
11 },
12 template: '<div><button v-on:click="onClick">{{count}}</button></div>'
13 })
14
15 var app = new Vue({
16 el: '#app',
17 data: {
18 message: 'Hello Vue!'
19 }
20 })
运行代码后见下图，我们可以看见例子(index.html)中的<div id=app>{{message}} …</div> message属性被监听和绑定订阅者。 Vue利用Object.defineProperty来监听对象属性值的变化和对变化的通知。
对用于Object.defineProperty里定义的两个方法get和set，分别对应了Watcher对象订阅和属性变化通知给Watcher对象
Watcher对象的订阅过程
其中，get: function reactiveGetter方法，用于Watcher订阅此属性变化通知。get方法会在该属性值触发读（read）动作的时候触发。以上图中的message为例，当发生类似代码 “let val = message”或者”message”时，就会触发get函数。
从上面的get: function reactiveGetter方法代码中，我们可以看到表示当Dep.target不为空时，就进行Watcher的订阅。Dep.target实际上指向的是一个Watcher对象。
当调用类似下列代码时
Dep.target = watcher; // Watcher对象
this.messgae;
就会触发以下代码
1 get: function reactiveGetter () {
2 const value = getter ? getter.call(obj) : val
3 if (Dep.target) { //Dep.taget指向一个Watcher对象
4 dep.depend() //当Dep.target不为空时，调用Dep对象(dep)的depend()方法来进行watcher的订阅
5 if (childOb) {
6 childOb.dep.depend()
7 if (Array.isArray(value)) {
8 dependArray(value)
9 }
10 }
11 }
12 return value
13 },
//代码出自Vue源代码目录下的/src/core/instance/index.js
我们再来看下depend做了什么
1 export default class Dep {
2 static target: ?Watcher;
3 id: number;
4 subs: Array<Watcher>;
5
6 constructor () {
7 this.id = uid++
8 this.subs = []
9 }
10
11 addSub (sub: Watcher) { //将Watcher对象放入subs数组中，完成订阅动作，有属性变化后，Dep通知subs数组里所有的watcher对象。
12 this.subs.push(sub)
13 }
14
15 removeSub (sub: Watcher) {
16 remove(this.subs, sub)
17 }
18
19 depend () { //Watcher注入Dep对象
20 if (Dep.target) {
21 Dep.target.addDep(this)
22 }
23 }
24
25 notify () {
26 // stabilize the subscriber list first
27 const subs = this.subs.slice()
28 for (let i = 0, l = subs.length; i < l; i++) {
29 subs[i].update()
30 }
31 }
32 }
33
34 // the current target watcher being evaluated.
35 // this is globally unique because there could be only one
36 // watcher being evaluated at any time.
37 Dep.target = null
38 const targetStack = []
//代码出自Vue源代码目录下的/src/core/observer/dep.js
从上面的Dep代码中可以看出，调用了Watcher对象（Dep.target）的addDep方法注入Dep对象，来订阅属性变化通知。 接下来，我们再看一下addDep做了些什么。
1 export default class Watcher {
2
3 ............
4
5 /**
6 * Add a dependency to this directive.
7 */
8 addDep (dep: Dep) {
9 const id = dep.id
10 if (!this.newDepIds.has(id)) {
11 this.newDepIds.add(id)
12 this.newDeps.push(dep)
13 if (!this.depIds.has(id)) {
14 dep.addSub(this)
15 }
16 }
17 }
18
19 .............
20
21 }
22
23
//代码出自Vue源代码目录下的/src/core/observer/watcher.js
我们可以从addDep方法里看到，最终调用了Dep的addSub方法。结合上面已列出的Dep代码。最终将watcher对象放入了Dep对象的subs数组中，完成了订阅动作。
Watcher对象接收属性值变化通知
set: reactiveSetter方法，在属性值执行写操作时（就是被赋值），会被触发。意味着类似代码”this.message=’hello again’ “就会触发set函数，执行下列代码
1 set: function reactiveSetter (newVal) {
2 const value = getter ? getter.call(obj) : val
3 /* eslint-disable no-self-compare */
4 if (newVal === value || (newVal !== newVal && value !== value)) {
5 return
6 }
7 /* eslint-enable no-self-compare */
8 if (process.env.NODE_ENV !== 'production' && customSetter)
9 {
10 customSetter()
11 }
12 if (setter) {
13 setter.call(obj, newVal)
14 } else {
15 val = newVal
16 }
17 childOb = !shallow && observe(newVal)
18 dep.notify()//通知watcher对象，value值发生变化。
19 }
//代码出自Vue源代码目录下的/src/core/instance/index.js
在set函数中，调用dep.notify将最新的属性值通知dep对象里的所有watcher（保存在subs数组中），watcher对象调用update方法更新视图（参照上面提供的Dep代码）。
总结
1.Vue数据绑定，由Observer,Dep和Watcher组成。 Observer监测属性变化，发送变化通知。 Watcher订阅变化通知，根据通知里的最新属性值，更新视图。 Dep链接Observer和Watcher，转发Observer的通知到Watcher，Watcher通过Dep订阅Observer的通知。
2.Observer利用Object.defineProperty定义的get方法，监控属性的读操作。在读操作中调用get方法，如果Dep.target指向了一个Watcher对象，就调用Dep.depend–>Watcher.addDep–>Dep.addSub订阅属性变化通知。
3.Observer利用Object.defineProperty定义的set方法，监控属性的写操作（即更新属性值），在写操作中调用set方法，set方法里调用Dep.notify–>Watcher.update来用更新的值更新视图。