标签：订阅 Vue 绑定 视图 Compile 双向 数据 监听

Vue的双向绑定原理

面试话术

vue.js是采用数据劫持结合发布者和订阅这的模式，通过Object.defineProperty()来劫持各个属性的getter和setter，在数据发生变动时发布消息给订阅者，触发响应的回调来渲染视图。

具体步骤

1、通过observer的数据对象进行递归遍历，包括子属性的对象的的属性，都加上setter和getter，从而给这个对象的某个值赋值，就会触发setter,这样来监听数据的变化

2、通过compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染视图，并对每个指令对应的节点绑定更新函数，添加监听数据的**订阅者**，数据发生变动，更新视图

3、watcher订阅者是observer和Compile之间的桥梁，在数据发生变化时，调用视图更新的方法，触发 Compile中的回调。

4、 MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

拓展：

观察者：对一个实例，对每一个属性值都进行观察。

订阅/发布者模式

发布者就是通过事件触发机制发布任务。

订阅者通过监听机制监听任务执行过程的变化

订阅发布模式(观察者模式)，定义了一种一对多的关系，让多个观察者同时观察同一个主题对象，这个主题对象的状态发货僧变化是就会通知所有的观察者对象。

执行流程

发布者发布通知==》主题对象收到通知推送给订阅者==》订阅者执行相应的操作

标签：订阅,Vue,绑定,视图,Compile,双向,数据,监听
来源： https://blog.csdn.net/weixin_49320962/article/details/116275004

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。