MVVM

前后端不分离

在早期，Web 应用开发主要采用前后端不分离的方式，它是以后端直接渲染模板完成响应为主的一种开发模式。以前后端不分离方式开发的 Web 应用的架构图如下。

前后端分离

随着 AJAX 技术的出现，可以在不刷新页面向服务器发送 http 请求，所以又出现了前后端分离的开发模式。 后端只要开发接口即可，前端可以通过发起 AJAX 请求，拿到后端的数据，渲染和怎样调用接口的事情，交给前端。以前后端分离方式开发的 Web 应用的结构图如下：

特点

• 是目前 Web 开发的主流模式。
• 需要静态文件服务器和后端接口服务器。
• 后台服务器只提供的数据接口的服务，响应的往往是 JSON 数据。
• 开发时，前后端责任分工明确。
• 前后端解耦，可以同时开发，提高开发效率。
• 一个后台即可满足网站、app、小程序等多种应用的需要。

MVVM

核心思想

MVVM的核心思想是将应用程序的视图（View）和模型（Model）分离，并为模型创建一个视图模型（ViewModel），以便在视图和模型之间进行双向绑定。这样，当模型更改时，视图将自动更新，而当用户在视图中进行更改时，模型也将自动更新。

基本组成部分

• 模型（Model）：表示应用程序的数据和业务逻辑。
• 视图（View）：用户与模型进行交互的界面。
• 视图模型（ViewModel）：处理模型数据并在视图和模型之间进行双向绑定的中间层。

优点

• 数据驱动的界面：视图模型处理数据，视图自动更新，从而实现了数据驱动的界面。
• 双向绑定：双向绑定允许视图和模型之间的自动同步，从而减少了代码量。
• 可测试性：MVVM将视图和模型分离，使得测试更容易进行。
• 可重用性：视图模型可以被重复使用，从而实现代码重用。
• 提高代码的可维护性和可重用性。
• 提高开发效率。

缺点

• 需要学习额外的框架和库。
• 需要额外的开发时间和精力。

适用场景

• 需要处理大量数据和复杂业务逻辑的应用程序。
• 需要实现视图和模型之间的双向绑定和交互的应用程序。
• 需要提高开发效率和代码可维护性的应用程序。

实现

• 将模型封装为数据类。
• 为模型创建一个视图模型，处理模型数据并在视图和模型之间进行双向绑定。
• 将视图模型绑定到视图。
• 将视图模型中的数据传递给视图。
• 处理视图中的用户输入，将其传递给视图模型。