发布时间:2024-02-15 08:30
双向数据绑定就是指:数据的变化会影响视图更新,反之视图的变化也会影响数据的更新。
vue是一种双向数据绑定的架构,由三部分组成:
数据层(Model):应用数据和业务逻辑。
视图层(View):应用的页面展示。
业务逻辑层(ViewModel):架构封装的核心,主要是把数据和视图结合起来。这三部分就是所谓的MVVM框架。而关键点就在于业务逻辑层(ViewModel) 部分。ViewModel的主要职责就是在数据变化之后更新视图,在视图变化之后更新数据。
通过以下四个步骤实现数据数据的双向绑定:
1、实现一个监听器Observer ,对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者;
2、实现一个解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数;
3、实现一个发布订阅模型Watcher+Dep,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图。;
实现一个MVVM,整个以上三者,作为一个入口函数;
其中:
Dep是发布订阅者模型中的发布者:get数据的时候,收集订阅者,触发Watcher的依赖收集;set数据时发布更新,通知Watcher 。一个Dep实例对应一个对象属性或一个被观察的对象,用来收集订阅者和在数据改变时,发布更新。
Watcher是发布订阅者模型中的订阅者:订阅的数据改变时执行相应的回调函数(更新视图或表达式的值)。一个Watcher可以更新视图,如html模板中用到的{{test}},也可以执行一个$watch监督的表达式的回调函数(Vue实例中的watch项底层是调用的$watch实现的),还可以更新一个计算属性(即Vue实例中的computed项)。