vue的MVVM实现原理

MVVM：

MVVM框架主要包含3个部分:model、view和 viewmodel。

 

Model:指的是数据部分，对应到前端就是javascript对象

View:指的是视图部分，对应前端就是dom

Viewmodel:就是连接视图与数据的中间件

即后台数据通过Viewmodel中间件控制视图的更新变化，视图的变化通过Viewmodel中间件更新后台的数据，从而来分离视图view和模型model；

优点：1）可复用性高，可将通用的视图View模块放在一个ViewModel里面，让很多View可以复用

          2）独立开发：开发人员可以专注业务逻辑和书记员的开发，设计人员可以专注于页面的设计

         3）低耦合：视图可以独立于Model变化和修改，一个ViewModel可以绑定在不同的View上，当View改变时Model不一 定改变，反之一样

View→Model ：可以用事件监听方法来获取视图中的数据，传给model中的data，例v-model等方法

Model →View：数据更新视图的关键在于如何准确获得后面变化的数据，此时就可用到Vue.set()或vm.$set实例（全局vue.set()别名，主要用于当对象中某个属性值动态时生成处理）方法来设置变化的数据，来更新页面数据

Vue.set(target,key,value)

target:object/array;    注意： object不能是vue实例，也不能是vue实例的根数据对象 

key:string/number

value:any