当前位置：首页 > news >正文

【一文读懂】什么是MVVM？

news 来源：原创 2025/4/30 3:05:41

MVVM

Vue 是一个渐进式的 JavaScript 框架，它采用了 MVVM（Model-View-ViewModel）设计模式，这使得它能够高效地进行数据绑定和用户界面的更新。

概念

1. Model（模型）

含义：Model 代表应用程序的数据层，它通常是 JavaScript 对象或数组。这个部分存储着应用程序的状态（例如，用户输入的数据、从 API 获取的数据等）。
与 Vue 的关系：在 Vue 中，data 选项就是模型（Model）。它是数据源，当数据发生变化时，Vue 会自动更新界面。

2. View（视图）

含义：View 代表用户界面（UI）层，显示模型数据，并允许用户与应用进行交互。通常是 HTML 和 CSS 的组合。
与 Vue 的关系：在 Vue 中，View 是由模板（template）来定义的，模板中通过绑定来展示 data（模型）的内容，响应用户的输入并显示相应的数据。

3. ViewModel（视图模型）

含义：ViewModel 充当了模型和视图之间的中介，它负责将模型数据转换为视图可以显示的格式，同时也负责将用户在视图中做出的操作转化为对模型的更新。换句话说，ViewModel 是数据与视图的双向绑定桥梁。
与 Vue 的关系：在 Vue 中，Vue 实例 是 ViewModel。它管理着 data（模型）和 template（视图）之间的关系。Vue 的响应式系统会自动监测 data 的变化，并实时更新 View（即模板）。

具体实现

数据绑定：Vue 通过 双向数据绑定（two-way data binding）技术实现了视图和数据的同步。它使用了 响应式系统（reactivity system）来追踪模型数据的变化，当数据变化时，自动更新视图。
指令：Vue 使用了模板语法中的指令（如 v-bind, v-model, v-for 等）来将视图与数据进行绑定。
事件处理：Vue 中的 v-on 和 @ 符号用于绑定事件。当用户操作视图时，事件会触发，进而通过 ViewModel 更新模型数据，形成双向绑定。

举个例子：

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

在这个例子中：

Model：data 中的 message 是模型数据。
View：HTML 中的 <input> 和 <p> 元素组成了视图。
ViewModel：Vue 实例充当了 ViewModel，负责将模型数据 message 绑定到视图 <input> 和 <p> 中。

传统HTML

在传统的 HTML 中，我们通过 JavaScript 来直接操控 DOM 元素。每当模型数据变化时，我们需要显式地更新视图。最基本的方式就是通过 innerHTML 或 textContent 来更新 HTML 元素的内容。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Model-View Binding</title>
</head>
<body>
  <input type="text" id="input" placeholder="Enter text">
  <p id="output"></p>

  <script>
    // 定义模型
    let model = {
      message: 'Hello, World!'
    };

    // 选择视图中的 DOM 元素
    const inputElement = document.getElementById('input');
    const outputElement = document.getElementById('output');

    // 更新视图（将模型数据插入到视图中）
    function updateView() {
      outputElement.textContent = model.message;
    }

    // 监听视图上的用户输入
    inputElement.addEventListener('input', (event) => {
      model.message = event.target.value;  // 更新模型
      updateView();  // 更新视图
    });

    // 初始化视图
    updateView();
  </script>
</body>
</html>