【八股系列】vue的双向绑定原理是什么?

Vue 的双向绑定是通过数据劫持发布-订阅模式实现的。
Vue中,每一个组件都有一个对应的Watcher实例,它会观察组件中所有需要被双向绑定 的属性。当属性的值发生变化 时,Watcher会通知相应的Dep对象,Dep对象会通知所有订阅 它的Watcher实例,然后触发组件的重新渲染
在组件的模板中,Vue会将需要被双向绑定的属性和组件的data属性建立起一个响应式的关系。当用户在模板中修改了属性的值 时,Vue触发 相应的setter函数,setter函数会通知Dep对象,Dep对象会通知所有订阅它的Watcher实例,然后触发组件的重新渲染。

下面的流程图可以帮助理解Vue的双向绑定原理:
data Observer Dep Watcher Component Render Template User Input Setter Dep Watcher Component Render

相关推荐
IT_陈寒1 小时前
Python多进程池的坑:子进程竟然不会退出
前端·人工智能·后端
snow@li1 小时前
前端:全景深度分析/前端岗位起源,以及“美国没有前端岗位”的真相
前端
恋猫de小郭1 小时前
Gradle 9.7.0 将提速 Android 构建,Sync 提升接近一倍
android·前端·flutter
lilian2331 小时前
Harmony os 技术实战|拼豆制图48:把个人页字符串路由改成可穷尽的类型协议
前端·华为·harmonyos
咏方舟【长江支流】1 小时前
【前端2】单据编辑 -订单单据主子表,万能模板行,自定义添加行
前端·前端框架·状态模式·咏方舟-长江支流
qq_452396231 小时前
第六篇:《CI/CD 流水线:从前端构建到自动化部署》
前端·ci/cd·自动化
咏方舟【长江支流】1 小时前
【前端1】单据编辑 -EasyUI/Vue/React/Bootstrap 主流框架实现订单单据主子表显示和编辑比较,哪个你最易入门?
前端·vue.js·easyui·咏方舟-长江支流·userbaodatagrid
m0_579146652 小时前
Element UI 表格合并单元格完全指南:从原理到实战
前端·vue.js·elementui
sibylyue2 小时前
# Web端流媒体JS播放器开源库
前端·javascript·开源
码视野2 小时前
基于 Vue3 + Element Plus 的【基于物联网与深度学习的智慧工业园区能耗监测与光储充一体化微电网协同调度系统】设计与实现(附完整源码与PRD)
前端·人工智能·深度学习·物联网·vue3