设计架构 | MVVM模型

250 阅读1分钟

前言:本文简单介绍了MVVM,作为Vue开发的设计思想,学习MVVM将有助于我们深入理解Vue的目的与原理,是在现有的MVC基础上的扩展。

简介

MVVM (Model-View-ViewModel),响应式编程模型,目的是分离视图 (View) 和模型 (Model) ,避免直接操作DOM,降低DOM操作的复杂性,是一种设计思想。Vue在设计上一定程度上借鉴了这种思想。

MVVM

MVVM:页面输入改变数据,数据改变影响页面的数据展示与渲染

  • M (Mode):普通的Javascript数据对象
  • V (View):前端展示页面
  • VM (ViewModel):用于双向绑定(数据与页面),就是Vue示例

特点

  1. 低耦合
  2. 可重用性
  3. 独立开发
  4. 可测试

实例

在实际的代码中,MVVM模式是如下图表现,通过ViewModel在View和Model之间做一个中间商,通过它联系两端,并实现数据的双向绑定

Snipaste_2021-10-27_13-36-54