vue双向绑定原理

vue采用的是数据劫持结合发布订阅者模式来实现双向绑定,通过Object.defineProperty,通过递归深度遍历数据并劫持了数据的getter跟setter,在数据发生变化时发布消息给订阅者,触发相应的监听回调。
1、第一步,js对象传递给vue作为数据属性时,通过递归的方式给对象的每个值都添加上了getter跟setter,当给对象赋值时,就会触发setter,监听到数据的变化。
2、当数据绑定到dom对象上时,订阅者是作为watcher观察者和complier编译器之间的桥梁,在劫持data的时候,会将watcher添加到数据上边去,这个watcher自身有一个update方法,这个方法会在数据更新时,由于订阅器的dep.notice()方法做了通知而执行试图的更新操作。


vue双向绑定.jpeg
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容