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

【一文读懂】什么是MVVM？

news 2025/12/2 5:28:02

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>

在上面的例子中，输入框的值被绑定到 model.message，并且每次用户修改输入框内容时，JavaScript 会手动更新视图（即 <p> 标签内容）。

总结

MVVM 模式使得 Vue 的数据和视图得以同步更新，开发者可以专注于业务逻辑而无需手动更新 UI。
通过响应式数据绑定，Vue 在内部处理了大量的 DOM 操作，使得开发更加高效和清晰。

数据双向绑定

1. 原理（响应式系统）

Vue 使用 JavaScript 的 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）来实现响应式数据。通过这些机制，Vue 能够监控数据的变化，当数据发生变化时，自动通知视图更新。

数据对象的代理：Vue 会将 data 中的每个属性通过 getter 和 setter 进行代理，从而监控属性的访问和修改。
依赖收集和视图更新：当组件渲染时，Vue 会收集视图中使用的属性作为依赖。之后，当这些属性的值变化时，Vue 会触发相关的视图更新。

2. 实现（指令系统）

Vue 提供了 v-model 指令来实现双向数据绑定，特别是在表单元素（如 <input>、<textarea>、<select>）中，v-model 可以方便地实现数据和视图的同步。

`v-model` 的工作原理：

视图到模型的绑定（用户输入）：用户修改输入框的值时，Vue 会将输入的值自动更新到组件的数据中。
模型到视图的绑定：当模型数据变化时，Vue 会自动更新视图中的内容。