vue双向绑定的原理
时间: 2023-08-06 19:07:37 浏览: 54
引用\[2\]:首先再vue初始化的时候,就对data数据进行了劫持监听,其中就是监听器 Observe,用来监听所有属性。 若有属性发生变化就需要告诉订阅者Watcher看是否需要更新。 因为订阅者Watcher有多个,所以需要一个消息订阅器 Dep 来专门收集这些订阅者,在监听器Observe和订阅者Watcher之间进行统一管理。 还需要有一个指令解析器 Compile ,对每个节点元素进行扫描解析,将相关的指令(如 v-model,v-on …)对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应函数 当订阅者Watcher接收到相应属性的变化通知,就会执行对应的更新函数,从而去更新视图。 实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者实现一个订阅者Watcher,每个Watcher都绑定一个更新函数,Watcher可以收到属性的变化通知并执行相应的函数,从而更新视图实现一个消息订阅器 Dep ,主要收集订阅者,当 Observe监听到发生变化,就通知Dep 再去通知Watcher去触发更新。实现一个解析器Compile,可以扫描和解析每个节点的相关指令,若节点存在指令,则Compile初始化这类节点的模板数据(使其显示在视图上),以及初始化相应的订阅者。\[2\]
问题:vue双向绑定的原理
回答:vue双向绑定的原理是通过数据劫持结合发布者-订阅者模式的方式来实现的。在vue初始化时,会对data数据进行劫持监听,使用监听器Observe来监听所有属性。当属性发生变化时,会通知订阅者Watcher来判断是否需要更新。为了管理多个订阅者Watcher,使用消息订阅器Dep来收集这些订阅者。同时,还有一个指令解析器Compile,用于扫描和解析每个节点的相关指令,并将其初始化为订阅者Watcher,以及绑定相应的模板数据或函数。当订阅者Watcher接收到属性变化的通知时,会执行相应的更新函数,从而更新视图。这样就实现了数据和视图的双向绑定,数据变化时视图跟着变化,视图变化时数据也随之改变。\[2\]\[3\]
#### 引用[.reference_title]
- *1* [Vue基础知识总结 6:vue双向绑定原理](https://blog.csdn.net/guorui_java/article/details/120557340)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [Vue双向绑定原理](https://blog.csdn.net/weixin_52092151/article/details/119810514)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]