【八股系列】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

相关推荐
AllinLin几秒前
javaScript学习计划(Day26-30)
开发语言·javascript·学习
清平乐的技术专栏5 分钟前
电脑自带Edge浏览器进行PDF文件合并
前端·edge·pdf
Mintopia11 分钟前
🌈 React-Markdown 教学指南 —— 写给想让网页诗意地“读懂” Markdown 的你 ✨
前端·react.js·markdown
LYFlied14 分钟前
浏览器渲染图层详解
前端·性能优化·图形渲染·浏览器
DO_Community23 分钟前
加速 JavaScript 开发:DigitalOcean 应用托管现已原生支持 Bun
开发语言·前端·javascript
m0_6726565427 分钟前
React 使用 JSX 来替代常规的 JavaScript。
前端·javascript·react.js
她说彩礼65万28 分钟前
CSS 相对定位与绝对定位
前端·css
程序员王天28 分钟前
SQLite 索引智能构建:从每次启动30秒到秒开
前端·oracle·electron·sqlite
mon_star°34 分钟前
《疯狂动物城2》主题网页设计之旅
前端
一只爱吃糖的小羊34 分钟前
Vue 3 vs React 19:响应式系统的“自动挡“与“手动挡“之争
前端·vue.js·react.js