MVVM模式浅析

CAUC_lin2024-01-28 22:31

1. 简介

MVVM（Model-View-ViewModel）是一种广泛应用于构建可维护且易于测试用户界面的设计模式。该模式的核心理念是将 UI逻辑和业务逻辑解耦，通过双向数据绑定机制简化开发者的工作量，使其能够专注于业务逻辑编写，同时保证用户界面的响应性和良好的可维护性。

2. 功能与特性详解

MVVM主要由三个核心部分组成：模型(Model)、视图(View)和视图模型(ViewModel)。

模型：负责数据存储。
视图：负责渲染用户界面，展示模型中的数据状态。
视图模型：作为模型与视图之间的桥梁，它封装了视图的状态和行为逻辑，并实现了双向数据绑定。

首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。

从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

3. 实践示例

js 复制代码

  <body>
    <div id="app">
      <!-- View 视图部分 -->
      <h2>{{name}}</h2>
    </div>
  </body>

  <script src="./js/vue.min.js"></script>

  <script>
    //创建的vue实例,就是 VM ViewModel
    var VM = new Vue({
      el: "#app",
      //data就是MVVM模式中的 model
      data: {
        name: "hello",
      },
    });
  </script>