vue中的双向数据绑定原理简单理解
保存
什么是双向数据绑定？如何去实现？Observer，Compile，Watcher
代码开发 2019-03-11 17:25:41
根据流程图来理一下实现一个MVVM：
如上图所示，我们可以看到，整体实现分为四步：
1、实现一个Compile，对指令进行解析，初始化视图，并且订阅数据的变更，绑定好更新函数
2、实现一个Observer，对数据进行劫持，通知数据的变化
3、实现一个Watcher，将其作为以上两者的一个中介点，在接收数据变更的同时，让Dep添加当前Watcher，并及时通知视图进行update。
4、实现MVVM，整合以上三者，作为一个入口函数
流程解读
第一步：创建MVVM、Compile类，并且利用createDocumentFragment将<div id="app"></div>下的标签放到JS文档碎片中去。
第二步：对 标签 进行编译，将带有 v- 指令的标签和{{ }}的标签解析出来
第三步：创建Observer类进行数据劫持、深度递归劫持，当data中设置值或者修改值的时候，利用Object.defineProperty对值进行监控。
第四步：创建Watch类观察者，用新值和老值进行比对，如果发生变化，就调用更新方法，进行视图更新。
第五步：将输入框v-model和视图绑定起来，输入框的值变化，同时页面中通过{{}}绑定的值也变化，实现双向数据绑定。
代码比较粗糙，核心就是这些了。应该来说一定要掌握的，因为Vue,Watcher,Dep等都是大家非常熟悉的构造函数了，创造实例只是前面多了一个关键字 new。其他的平常都很熟悉了。
