【MVVM模型】——详解（核心三组件及基础代码）

原创已于 2024-10-17 18:39:01 修改 · 2.1k 阅读

23 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端 #javascript #html #前端框架

于 2024-10-17 18:33:40 首次发布

学习笔记同时被 3 个专栏收录

7 篇文章

订阅专栏

Vue

5 篇文章

订阅专栏

前端

2 篇文章

订阅专栏

该文章已生成可运行项目，

MVVM （Model-View-ViewModel）是一种用于构建用户界面应用程序的设计模式，现常用于在桌面、移动和Web应用程序开发中。通俗地讲，它可以理解为MVC的改进版，把MVC中的V（View）的状态和行为抽象化，把视图UI与业务逻辑分开。

一，MVVM 核心三组件

1. M：模型(Model) ：对应 data 中的数据

2. V：视图(View) ：模板

3. VM：视图模型(ViewModel) ： Vue 实例对象

如下图所示结构：

模型（Model）：

代表应用程序的数据和业务逻辑。Model负责数据的存储、检索和操作，但不直接与用户界面交互。

可以理解为厨房。厨房负责准备食物。厨师们（数据）知道如何制作各种菜肴（业务逻辑）。他们不直接和顾客交流，而是通过服务员来传递食物。
视图模型（ViewModel）：

作为Model和View之间的桥梁，ViewModel负责转换Model中的数据，使其更适合在View中显示。ViewModel还处理用户的输入，并将这些输入转换为对Model的操作。ViewModel监听Model中数据的变化，并将这些变化通过数据绑定传递给View。

可以理解为服务员。服务员是连接厨房和餐厅的桥梁。他们从厨房（Model）获取食物，然后端给顾客（View）。同时，他们也会把顾客的需求（比如加辣、少盐）传达给厨房。服务员确保顾客的需求被正确理解和满足。
视图（View）：

代表用户界面，负责向用户展示数据和接收用户的输入。View通过数据绑定与ViewModel交互，当ViewModel中的数据发生变化时，View会自动更新以反映这些变化。同时，View也可以监听用户的交互（如点击按钮），并将这些事件传递给ViewModel处理。

可以理解为餐厅。餐厅是顾客用餐的地方，相当于用户界面。顾客在这里点菜（用户输入），并享用食物（查看数据）。餐厅的服务员（View的代码）会将顾客的订单（用户操作）传递给厨房，并将做好的菜肴（数据显示）端给顾客。

二，数据绑定与事件绑定

图中箭头表示数据和事件的流向：

数据绑定：ViewModel和View之间的数据是双向绑定的，即ViewModel中的数据变化会自动更新到View，View中的用户输入也会自动更新到ViewModel。

事件绑定：View中的用户交互（如按钮点击）会触发ViewModel中的命令或方法，从而更新Model中的数据。

三，基础代码示例

app.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单的MVVM示例 - 待办事项列表</title>
</head>
<body>
    <h2>我的待办事项</h2>
    <!-- 待办事项列表 -->
    <ul id="todoList"></ul>
    
    <!-- 添加待办事项的输入框和按钮 -->
    <input type="text" id="newTodo" placeholder="添加新的待办事项">
    <button onclick="addTodo()">Add</button>

    <script src="app.js"></script>
</body>
</html>

app.js

// Model，负责存储待办事项的数据
let todos = [];

// ViewModel，负责处理待办事项的逻辑
const todoViewModel = {
    // 获取所有的待办事项
    getTodos: function() {
        return todos;
    },
    
    // 添加一个新的待办事项
    addTodo: function(todoText) {
        const newTodo = {
            id: Date.now(), // 简单的ID生成方式
            text: todoText,
            completed: false
        };
        todos.push(newTodo);
    }
};

// View，负责显示数据和接收用户输入
// 这个函数用来更新待办事项列表的显示
function renderTodos() {
    const todosList = document.getElementById('todoList');
    todosList.innerHTML = ''; // 清空现有的列表
    
    const todos = todoViewModel.getTodos(); // 获取所有待办事项
    todos.forEach(todo => {
        const li = document.createElement('li');
        li.textContent = todo.text;
        todosList.appendChild(li);
    });
}

// 当用户点击“Add”按钮时调用这个函数
function addTodo() {
    const newTodoText = document.getElementById('newTodo').value;
    if (newTodoText.trim()) {
        todoViewModel.addTodo(newTodoText); // 添加新的待办事项
        renderTodos(); // 更新待办事项列表的显示
    }
    document.getElementById('newTodo').value = ''; // 清空输入框
}

// 页面加载时渲染待办事项列表
document.addEventListener('DOMContentLoaded', renderTodos);

本文章已经生成可运行项目