【Vue】07 Vue技术——Vue 中的 MVVM 模型-平芜编程栈

前言

在现代前端开发中，MVVM（Model-View-ViewModel）架构模式已成为构建数据驱动应用的核心思想。Vue.js 正是基于这一理念设计的渐进式 JavaScript 框架。本文将通过一个完整的示例，结合代码、控制台输出与可视化图解，深入剖析 MVVM 模型的三大核心组件：M（Model）、V（View）、VM（ViewModel），并揭示它们之间的运行机制。

官网文档：https://cn.vuejs.org/guide/essentials/forms.html

一、什么是 MVVM 模型？

MVVM 是一种软件架构模式，旨在实现视图与数据的解耦，让开发者可以专注于业务逻辑而无需手动操作 DOM。其结构如下：

组件	含义
M (Model)	数据层，对应`data`中的数据对象
V (View)	视图层，即 HTML 模板代码
VM (ViewModel)	核心桥梁，由 Vue 实例创建，负责连接 Model 和 View

💡 简单来说：
Model → ViewModel：数据变化触发视图更新
View → ViewModel：用户交互事件被监听并处理
ViewModel：自动同步数据与界面，实现双向绑定

DOM（Document Object Model，文档对象模型）是一种用于表示和操作 HTML 或 XML 文档的编程接口（API）。它将整个网页文档抽象为一个树形结构的对象模型，使得开发者可以通过 JavaScript 等脚本语言动态地访问、修改、添加或删除页面内容、结构和样式。

二、实战示例解析

我们来看一段基础的 Vue 代码，逐步分析 MVVM 的工作流程。

<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>MVVM模型</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 准备好一个容器 --><divid="root"><h1>学校名称：{{name}}</h1><h1>学校地址：{{address}}</h1><h1>测试一下1：{{1 + 1}}</h1><h1>测试一下2：{{abc}}</h1><h1>测试一下3：{{$options}}</h1><h1>测试一下3：{{$emit}}</h1><h1>测试一下3：{{_c}}</h1></div><scripttype="text/javascript">// 关闭生产环境提示Vue.config.productionTip=false;constvm=newVue({el:'#root',data:{name:'上高山',address:'长沙',abc:'123'}});console.log(vm);</script></body></html>

✅ 运行结果展示

打开浏览器后，页面显示如下内容：

学校名称：上高山 学校地址：长沙 测试一下1：2 测试一下2：123 测试一下3：{"components":{}, "directives":{}, ...} 测试一下3：function(event){...} 测试一下3：function(a,b,c,d){return createElement$1(...)}

三、MVVM 核心机制详解

1.Model（模型）—— data 中的数据

在 Vue 实例中，data对象就是Model 层。它包含了所有需要在视图中展示或使用的数据。

data:{name:'上高山',address:'长沙',abc:'123'}

这些数据会被 Vue 自动响应式化，任何修改都会通知视图进行更新。

2.View（视图）—— 模板代码

HTML 中使用{{ }}插值语法的部分就是View 层，它是用户看到的界面。

<h1>学校名称：{{name}}</h1><h1>学校地址：{{address}}</h1>

Vue 会将name和address的值从data中读取，并插入到对应的<h1>元素中。

3.ViewModel（视图模型）—— Vue 实例对象

const vm = new Vue({...})创建的实例就是ViewModel，它是整个 MVVM 的“大脑”。

🔍 重要发现：

data中的所有属性，最终都出现在了vm上；
vm身上的所有属性，以及 Vue 原型上的方法，在模板中都可以直接使用。

例如：

{{ $options }}<!-- 输出 options 配置 -->{{ $emit }}<!-- 输出 emit 方法 -->{{ _c }}<!-- 输出内部createElement函数 -->

这些属性和方法来自 Vue 的原型链，是 Vue 提供的内置工具。

四、关键观察与结论

通过调试工具查看console.log(vm)，我们可以看到：

{name:"上高山",address:"长沙",abc:"123",_data:{...},_events:{...},$options:{...},$emit:function(),_c:function()}

✅ 观察总结：

发现	解释
`data`属性都在`vm`上	Vue 将`data`中的每个属性代理到实例上，方便访问
`$options`可用	包含组件配置信息，如`el`,`data`,`methods`等
`$emit`可用	用于触发自定义事件
`_c`可用	内部用于创建虚拟 DOM 的方法，一般不推荐直接调用