vue双向数据绑定的实现

一、什么是双向数据绑定

        双向数据绑定就是指：数据的变化会影响视图更新，反之视图的变化也会影响数据的更新。

       

 二、双向绑定的原理

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项）。