2.(原理分析类)vue如何实现双向绑定?

前端技术社区总目录(订阅之前请先查看该博客)

Vue 数据双向绑定主要是指:数据变化更新视图,视图变化更新数据
实现原理:采用“数据劫持”结合“发布者-订阅者”模式的方式,通过“Object.defineProperty()”方法来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调

Vue 主要通过以下 4 个步骤来实现数据双向绑定的。
(1)实现一个监听器 Observer
(2)实现一个解析器 Compile
(3)实现一个订阅者 Watcher
(4)实现一个订阅器 Dep
四个步骤流程图如下:
在这里插入图片描述

示例效果如下:
在这里插入图片描述

(1)实现一个监听器 Observer:
对数据对象进行遍历,包括子属性对象的属性

猜你喜欢

转载自blog.csdn.net/m0_60387551/article/details/133382551