vue中的双向数据绑定原理简单理解

原文链接https://www.toutiao.com/i6667062018404516364/?tt_from=weixin&utm_campaign=client_share&wxshare_count=1&timestamp=1552385185&app=news_article&utm_source=weixin&iid=64418677067&utm_medium=toutiao_android&group_id=6667062018404516364

保存

什么是双向数据绑定？如何去实现？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。其他的平常都很熟悉了。

转载于:https://www.cnblogs.com/ressiry/p/10518736.html