一.MVVM的构成

1.Model代表数据模型，数据和业务逻辑都在Model层中定义
2.View代表UI视图，负责数据的展示
3.ViewModel负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作

二.什么是MVVM

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，实现了数据双向绑定。Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷

三.MVVM是怎么工作的？

在MVVM的架构下，View层和Model层并没有直接联系，而是通过ViewModel层进行交互。ViewModel层通过双向数据绑定将View层和Model层连接了起来，使得View层和Model层的同步工作完全是自动的。

image.png

View通过View-Model的DOM Listeners将事件绑定到Model 上，而Model则通过Data Bindings来管理View中的数据，View-Model从中起到一个连接的作用。

1665883618993.png
1665883667316.png

因此开发者只需关注业务逻辑，无需手动操作DOM，复杂的数据状态维护交给MVVM统一来管理