VUE的双向绑定实现原理MVVM

VUE的双向绑定实现原理MVVM

     vue.js是JavaScript MVVM (Model-View-ViewModel)库。

 

vue里的数据双向绑定是实现原理就是MVVM模式。

在讲MVVM模式之前，可以先了解下Mqtt协议的设计思路，通过各个终端与Mqtt中间件订阅，发布的方式，

我们可以吧mqtt中间件看成是ViewModel，看成是接受并发送给个端信息，将各个终端看成是model或者view.

 

回来理解vue的MVVM

MVVM模式即model-View-ViewModel

Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM也会跟随发送变化，反之，DOM数据变化，对应绑定的数据也会发生变化。

 

ViewModel是vue的核心，也是Vue的一个实例，Vue实例时作用于某个元素上的，这个HTML元素可以是body，也可以是某个id指定的元素。

Dom Listerers和Data Bindings是实现双向绑定的关键。DOM Listeners 监听页面所有View层元素的变化。当View层发生变化。Model层的数据随之变化。Data Bindings监听Model层的数据。当数据发生变化，View层的DOM元素随之变化。