vue实现数据响应式的过程

1.怎样更形象的解释vue.js的响应式系统？

在前端框架中，vue.js的灵魂所在就是其“数据响应式”，简单的描述，就是当数据改变后，vue会告诉视图部分，根据数据的改变做出相应的改变，这直接导致vue使用起来灵活，深受欢迎。

视图层做出相应的反应，需要用双括号把数据括起来，当data中的数据做出改变时候，视图层的数据做出反应，可以直接在html中渲染出来。

一个简单的例子：

 {{ message }}

varapp =newVue({

el:'#app',

 data: {

message:'Hello Vue!'

 }

})

在以上的代码中，代码运行以后，会自动将Hello Vue显示到网页上，将data中的message数据改变之后，重新执行代码，网页便会做出相应，渲染出新的页面，这就是“响应式系统”。

2.搞清楚原理

在以上里例子中，并不需要改变DOM的数据，html就会做出改变，看起来太神奇了，简直有一点玄幻的感觉，那就要完全搞清楚这么牛逼的过程是怎样实现的？

Vue的响应模式是一种观察者模式，data中的数据改变的时候会被观察者观察到，然后做出相应的反应，根据观察到data改变后的数据重新渲染浏览器，做出响应。

这个关系可以以下关系式来表示：

data -> watcher

     data - dep -> watcher

dip={

id:number,

subs:watchers,

}

用watcher表示观察者，deta就是被观察者，两者之间形成一种依赖关系。Vue的作者设计了一个dip对象来表示这种依赖关系，

dep 由唯一标识属性 id和用于记录所有观察者的 subs组成，所有的dip对象共同构成一个dips对象（这里是一个数组，特殊的对象）。从这里可以看到，watcher实际上是一个函数，这个函数的作用就是根据data的变化做出改变，也可以看做是一种运算机制。这种运算机制会被记录到一个叫getter的属性，每次watcher运算得到的结果将会被存储在value 属性当中，实际上，这里还有一个叫cb的属性，记录回调函数，当watcher返回的值与当前的value值不同时候会被调用。