更新 绑定数据_什么是双向数据绑定？如何去实现？Observer，Compile，Watcher

根据流程图来理一下实现一个MVVM：

如上图所示，我们可以看到，整体实现分为四步：

1、实现一个Compile，对指令进行解析，初始化视图，并且订阅数据的变更，绑定好更新函数

2、实现一个Observer，对数据进行劫持，通知数据的变化

3、实现一个Watcher，将其作为以上两者的一个中介点，在接收数据变更的同时，让Dep添加当前Watcher，并及时通知视图进行update。

4、实现MVVM，整合以上三者，作为一个入口函数

流程解读

第一步：创建MVVM、Compile类，并且利用createDocumentFragment将

第二步：对 标签 进行编译，将带有 v- 指令的标签和{{ }}的标签解析出来

第三步：创建Observer类进行数据劫持、深度递归劫持，当data中设置值或者修改值的时候，利用Object.defineProperty对值进行监控。

第四步：创建Watch类观察者，用新值和老值进行比对，如果发生变化，就调用更新方法，进行视图更新。

第五步：将输入框v-model和视图绑定起来，输入框的值变化，同时页面中通过{{}}绑定的值也变化，实现双向数据绑定。

代码比较粗糙，核心就是这些了。应该来说一定要掌握的，因为Vue,Watcher,Dep等都是大家非常熟悉的构造函数了，创造实例只是前面多了一个关键字 new。其他的平常都很熟悉了。