前端技术社区总目录(订阅之前请先查看该博客)
Vue 数据双向绑定主要是指:数据变化更新视图,视图变化更新数据
实现原理:采用“数据劫持”结合“发布者-订阅者”模式的方式,通过“Object.defineProperty()”方法来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调
Vue 主要通过以下 4 个步骤来实现数据双向绑定的。
(1)实现一个监听器 Observer
(2)实现一个解析器 Compile
(3)实现一个订阅者 Watcher
(4)实现一个订阅器 Dep
四个步骤流程图如下:
示例效果如下:
(1)实现一个监听器 Observer:
对数据对象进行遍历,包括子属性对象的属性