Vue.js之所有能实现数据的双向绑定，最核心也是最基础的是Object.defineProperty的使用。

那么 new Vue() 之后，option.data 的数据具体是如何绑定到 Vue，又如何进行数据双向绑定的呢？

new Vue() -> 
this._init() -> 
initState(vm) -> 
observe(vm._data = {}, true) -> 
new Observer(value) -> 
this.observeArray(value),this.walk(value) ->
defineReactive() -> 
Object.defineProperty

vue.js的option.data 就是如此的进化，最终所有data都成为 vm._data 的可观察者对象。

那么如何让vm.name的改变同步到vm._data.name的改变呢，在vue中做了一层代理,看下图。

这样就能够达到  vm.name的任何操作都会反映到vm._data.name之上，vue的props也是同理。

我们一步一步的来看流程：

1、this._init()

2、initState(vm)

3、observe(vm._data = {}, true)

4、new Observer(value) 

5、this.observeArray(value),this.walk(value)

6、defineReactive()，Object.defineProperty

补充：

首先来看一张官网的图：

Vue首先会调用所有使用的数据，从而触发所有的 getter 函数，进而通过Dep对象收集所有响应式依赖，调用所有Watcher执行Render 操作，其中会进行虚拟Dom的存储和比较，进而渲染页面。

当有数据变更时会触发 setter 函数，触发dep.notify()，进而调用Watcher的update，推入Vue的异步观察队列中，最终调用Watch的getter或者cb方法进而调用vm._update(),再调用vm__patch__方法进行虚拟DOM的diff，并最终渲染到页面。

对于数组的操作：

Vue对数组的方法进行了一定的处理：

defineReactive方法中的Dep.target的值是什么

Dep.target实际上是一个Watcher实例

总结：

• 理解Vue的mvvm模式
• 知道vm.option.data如何初始化并转化成观察者对象
• 理解更改data是如何进行调用Watcher并进行更新