初识Vue2及MVVM理解

原创已于 2025-08-11 13:57:17 修改 · 691 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue #mvc

于 2025-08-11 11:19:57 首次发布

Vue 专栏收录该内容

5 篇文章

订阅专栏

1、什么是Vue

Vue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。

Vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计，核心库只关注视图层。

另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用，其特点综合了angular（模块化开发MVVM）和react（虚拟DOM，在内存中模拟DOM操作）的优点。

中文官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

2、MVVM

1、什么是MVVM ？

MVVM 是 Model-View-ViewModel 的缩写，它是一种用于构建用户界面（UI）的软件架构模式（设计模式），主要用于实现数据与视图的双向绑定，让开发者更高效地构建交互式前端应用。

MVVM源于MVC（Model-View-Controller）模式。

2、核心组成：

M：Model 模型层，这里表示 JavaScript对象

V：View 视图层，这里表示DOM（HTML操作的元素），即用户看到的界面

VM：ViewModel 连接视图和数据的中间件，负责数据绑定、状态管理、逻辑处理，并实现 View 和 Model 的解耦，Vue.js就是 MVVM中ViewModel层的实现者

在MVVM 架构中，是不允许“数据”和“视图”直接通信，只能通过ViewModel来通信，ViewModel其实就是定义了一个OBserver观察者

3、核心思想：

数据变化自动更新视图，用户操作自动更新数据，实现双向绑定。

4、数据流向：

Model → ViewModel → View

数据从 Model 传到 ViewModel，再通过数据绑定显示到 View（界面）

View → ViewModel → Model

用户在界面上的操作（比如输入、点击）会通过 ViewModel 更新 Model 中的数据

5、核心特性：

特性	说明
数据绑定	数据变化时，UI 自动更新；用户修改 UI，数据也自动同步
双向绑定	最典型的 MVVM 特性，比如 Vue 中 `v-model` 实现输入框和数据的双向同步
视图与逻辑分离	View 不直接操作 Model，而是通过 ViewModel 交互，提高可维护性
UI 自动更新	当数据（Model）发生变化时，UI（View）自动重新渲染，无需手动操作 DOM
逻辑集中管理	ViewModel 负责处理业务逻辑、状态管理、数据转换等

6、模式图示：

        +-------------+
        |    View     |  <---> 用户看到的界面（HTML/CSS）
        +-------------+
             ↑ | 双向绑定
             | ↓
        +-------------+
        | ViewModel   |  <---> 处理数据绑定、业务逻辑、状态管理
        +-------------+
             ↑ |
             | ↓
        +-------------+
        |    Model    |  <---> 数据层（业务数据、API 数据等）
        +-------------+

7、MVVM 与其他架构模式对比：

模式	全称	核心思想	常见应用 / 框架
MVC	Model-View-Controller	View 通过 Controller 操作 Model，适合传统服务端渲染	AngularJS（早期）、Backbone.js、Ruby on Rails
MVP	Model-View-Presenter	Presenter 负责更新 View，适合测试驱动开发	一些早期的桌面 / 移动应用
MVVM	Model-View-ViewModel	双向绑定，View 和 Model 解耦，数据驱动视图	Vue.js、Knockout.js、WPF、Android Jetpack

8、MVVM 的优点：

优点	说明
UI 和逻辑分离	前端开发者可以更专注于数据和交互逻辑，而不是手动操作 DOM
双向绑定	数据和视图自动同步，减少大量冗余的 DOM 操作代码
提高开发效率	借助框架的响应式机制，可以更快速构建交互式应用
可维护性强	代码结构清晰，便于协作和后期维护
适合复杂交互应用	特别适合数据频繁变化、需要实时更新 UI 的现代 Web 应用

9、MVVM 的缺点

缺点	说明
学习成本	对初学者来说，理解数据绑定、响应式原理可能需要一定学习
调试困难	数据变化自动更新视图，有时难以追踪数据变化的来源
过度依赖框架	框架通常对 MVVM 实现有高度封装，更换框架可能需要重构

ViewModel 能够观察到数据的变化，并且对视图对应的内容进行更新

ViewModel 能够监听到视图的变化，并能够通知数据发生改变

Vue.js就是一个MVVM的实现者，核心就是实现了DOM的监听与数据的绑定

3、项目导入vue

1、CDN方式

百度搜索vue.js CDN选择任意一个引入项目即可

2、官网下载

地址：Vue.js - 渐进式 JavaScript 框架 | Vue.js

以下是vue2的下载方式

3、项目引入vue

 <script src="js/vue.js"></script>

4、第一个vue项目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--view层，模板-->
<div id="app">
    {{msg}}
</div>

<script>
    var vm = new Vue({
        el: "#app",  //element对象，绑定的对象
        // model层：数据
        data: {  //要赋予的数据
            msg: "hello vue!"
        }
    });
    //viewModel层，当通过页面控制台直接vm.msg="你好！"改变值变化时，页面展示的值也会随之变化，这就是双向绑定
</script>
</body>
</html>