引言：为了优化代码设计，MVVM是如何管理UI，又是怎样利用关注点分离来解决耦合度高的现象，然后达到容易维护和测试的目的

MVVM--vue

两个方向实现页面和数据的双向绑定，数据发生变化自动更新页面，页面操作也会更新DOM和模型

1、划分

• Model：数据层，模型
• View：视图层
• ViewModel：中间件，核心！

2、图示

3、ViewModel包含 DOM Listeners 和 Data Bindings。

• Data Bindings用于将数据绑定到View上显示,即从 Model 到 View 的映射，可以节约手动更新视图的时间--模型转换为视图
• DOM Listeners用于监听DOM操作，即从 View 到 Model 的事件监听，这样Model就会随着View触发事件而改变。数据和视图完全分离不会相互影响--视图转换为模型

称为数据的双向绑定

4、vue实现MVVM的方式--数据劫持：

• vue2 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

• defineProperty 的缺陷有以下几个:

  • 1.无法监听原生数组的变化：需要使用被重新定义到数组原型上的七个方法
  • 2.需要遍历所有的属性，一次性全都劫持
  • 3.引用数据的属性变化无法被监听，需要使用vm.$set 和 vm.$delete API

• vue3 采用Proxy数据代理，在目标对象之前架设一层拦截，，对外部的访问进行过滤和修改，即拦截所有操作然后重定向到对象上。

  • Proxy代理的是整个对象，而不是对象的某个特定属性，不需要我们通过遍历来逐个进行数据绑定。

5、MVVM相对于MVC的优势？

• 1.MVVM 实现了数据与页面的双向绑定，MVC 只实现了 Model 和 View 的单向绑定。
• 2.MVVM 实现了页面业务逻辑和渲染之间的解耦，也实现了数据与视图的解耦，并且可以组件化开发。