MVVM模式简单理解

MVVM模式详解:从MVC到响应式编程的转变

MVVM模式脱胎于MVC
核心:响应式编程
M为mode

V为View Controller->基于MVC的思想多少人把V当作view,但是实际过程中view与view Controller确是紧密相连的。所以这里直接将view与view controller解释为MVVM中的V

VM是表示逻辑作用:
(1)将 Model 数据转换为 View 可以呈现的东西的事情。

     eg:在界面上有一个显示时间的标签,模型中一条属性数据是一个时间戳。这里我们就可以通过VM层将这个时间戳转换为具体时间然后赋值给界面显示时间的标签。当然这个转换你也可以在模型层里自己转换,不过若该模型的时间戳数据是给不同的界面(一个界面要求时间格式是yyyy-MM-dd HH:mm:ss 另一个是yyyy-MM-dd)赋值,恐怕你要再转换一次了

(2)根据业务逻辑改变view呈现的内容。

### MVVM模式概念 MVVM(Model-View-ViewModel)是一种软件架构模式,主要用于构建用户界面。它最早由微软在2005年推出并应用于WPF框架中[^2]。MVVM的设计理念源自经典的MVC模式,但在功能划分上更加专注于数据绑定和逻辑分离。 #### 核心组件 1. **Model**: 表示应用程序中的数据模型以及业务逻辑部分。它是独立于视图的存在,并不关心如何展示数据。 2. **View**: 负责呈现用户界面的部分。它的职责仅限于显示来自`ViewModel`的数据并与之交互。 3. **ViewModel**: 这是MVVM的关键所在。它充当了连接`View`和`Model`的桥梁角色。一方面向`View`提供可观察的数据源以便实现双向绑定;另一方面通过接口或者服务与`Model`通信获取实际所需的信息[^1]。 ### 实现机制 为了更好地理解MVVM的实际应用, 下面以一个简单的例子说明其工作流程: 假设我们有一个待办项列表(Todo List),其中包含添加新任务的功能: ```javascript // 定义 Model 部分 class TodoModel { constructor() { this.todos = []; } addTodo(todoText) { const newId = this.todos.length + 1; this.todos.push({ id: newId, text: todoText }); } } // 创建 ViewModel 来管理状态变化 const viewModel = new Vue({ el: '#app', data: { todos: [], newTodoText: '' }, methods: { addNewTodo() { if (this.newTodoText.trim()) { // 确保输入不是空白字符 model.addTodo(this.newTodoText); // 更新model this.todos = [...model.todos]; // 同步到viewModel this.newTodoText = ''; // 清空输入框 } } } }); // 初始化 Model 并填充一些初始数据 let model = new TodoModel(); model.addTodo('学习JavaScript'); model.addTodo('练习Vue.js'); // 将初始数据同步至 ViewModel viewModel.todos = [...model.todos]; ``` 在这个案例里,当用户提交一个新的todo项时,会触发 `addNewTodo()` 方法。此方法不仅修改了本地存储(`data`)里的副本还调用了真正的后台操作即更新原始model实例的内容。由于采用了响应式的编程风格(Vue内置特性), 所有依赖这些变量的地方都会自动重新渲染出来而无需手动干预DOM节点的操作过程[^1]。 另外值得注意的是,在某些平台比如Android开发环境下还可以利用Data Binding Library进一步简化上述代码结构从而减少样板代码量同时增强程序健壮性和维护便利度等问题[^3]。 ### 数据流方向 在一个典型的MVVM系统里面存在两种主要的数据流动形式: - **单向数据流**:从`ViewModel`流向`View`, 当前者的属性发生变化之后后者能够立刻反映出最新的改变情况; - **双向数据绑定**:允许开发者既可以从控件读取当前值也可以反过来设置它们的新数值进而影响对应的字段内容。这种技术特别适合表单验证场景下的即时反馈需求等等[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值