mvvm模式和mvc的区别 前端mvc和mvvm的理解

• 晚上练完车之后，有位小伙伴在答辩前向我咨询了关于MVVM的问题，我回答了他的问题后，他表示还是有些不太明白。确实，MVVM是一种复杂的软件架构模式。
• MVVM究竟是什么东西，与前后端有没有关系，它与MVC有什么区别，有什么优势？为了给出准确的答案，我查找了一些关于MVVM的论文、博客，并梳理出了自己的理解。
• 资源确实比较零散，准确性有量，如果小伙伴们发现错误的地方，请指出来，我们一起探讨学习。

• 爱自己，是终生浪漫的开始——这是王尔德的名言，也是我们对自己生活的期许。无论是在开发软件还是在生活中，我们都应该热爱自己，热爱我们所做的事情，这样才能做出更好的作品，过上更美好的生活。

• 对于MVC，想必大家都不陌生。在软件开发中，MVC是一种常用的架构模式。网上的资源各抒己见，有时会让人感到困惑。我个人认为MVC是模型、视图、控制器的缩写，主要用于分离业务逻辑和界面显示。

• 我们接下来讨论的MVVM，是以BS架构为基础的Java Web中的应用中常用的模式。MVVM是Model-View-ViewModel的简写，本质上可以说是MVC的改进版。MVVM将视图UI和业务逻辑分开，使开发者能更专注于业务逻辑和界面显示的开发。

• MVVM框架中，View负责发送用户交互请求，并将请求转交给ViewModel。ViewModel根据用户请求操作Model数据更新。当Model数据更新完毕，会通知ViewModel数据发生了变化，ViewModel随即更新View数据，完成视图的更新，从而完成用户的请求。这种彻底的视图与模型分离，降低了耦合性，提高了代码的可重用性和可维护性。

• 虽然MVVM有诸多优势，但它的实现也有一定的复杂性。例如，要实现mvvm的双向绑定，就需要用到一些设计模式如发布-订阅模式等。发布-订阅模式是一种一对多的关系，可以让多个视图绑定到同一个数据模型，当数据模型发生变化时，所有订阅了该数据模型的视图都会收到更新通知。

• 对于MVVM框架中的数据绑定技术实现方式有多种，如脏值检查（如Angular.js）、数据劫持（如Vue.js）等。这些技术都是为了实现数据与视图的实时同步，使开发者能更高效地开发出响应式的应用程序。

• 在前后端分离的趋势下，MVVM框架发挥着重要的作用。它使得前端开发者能更专注于界面的开发，后端开发者能更专注于业务逻辑的处理。这种分离的方式降低了系统的复杂性，提高了开发效率。

• 无论是MVC还是MVVM，都是为了解决软件开发中的问题而产生的架构模式。选择使用哪种模式，需要根据项目的具体需求和团队的技术储备来决定。在学习和使用这些模式的过程中，我们会遇到很多挑战和困难，但只要我们不断学习、不断探索、勇于创新实践新的想法和技术去解决实际的问题去不断丰富自己

代码与解析

指令解析器Compile：

要实现一个能够扫描和解析每个元素节点指令的编译器。这个编译器会按照预定的指令模板替换数据，并绑定相应的更新函数，从而使得页面元素能够根据数据进行动态的更新。

数据器Observer：

我们需要实现一个数据器。这个器能够全面地数据对象的所有属性变化。一旦有属性发生变动，器会立即获取最新的值，并通知所有订阅了该数据的对象（Dep）。

Watcher的实现：

Watcher是订阅-发布模式中订阅者的具体实现。它作为Observer和Compile之间的桥梁，能够订阅每个属性变动的通知，并在接收到通知后执行相应的回函数（发布），从而更新视图。

MVVM的函数与Vue的初始化：

当新建一个Vue对象时，MVVM的函数将被触发，框架开始进入初始化阶段。在这个过程中，Vue会执行两个关键操作。

第一个操作： 遍历系统中所有数据的属性，为每一个属性的变化添加。

第二个操作： 利用指令编译器Compile对视图中绑定的指令进行扫描和初始化。然后，通过Watcher来订阅并更新视图。Watcher会将自己添加到消息订阅器Dep中，从而完成Vue的初始化过程。

系统运行过程中的数据变化处理：

在系统运行过程中，一旦数据模型发生了变化，Observer的setter访问器属性就会被触发。消息订阅中心Dep会遍历它所维护的所有订阅者，对每一个订阅了该数据的对象发出一个更新通知。收到通知的订阅者会根据收到的信息对视图进行相应的更新。这个过程不断循环往复，构成了MVVM模式在Vue.js中的运行原理。

总结