Vue MVVM模型超详细讲解
理解MVVM模型
我们知道每一个 Vue 应用都是从创建一个新的实例开始的，根据 Vue2 的官方文档我们可以得知 Vue 的设计是得到了 MVVM 模型 的启发，所以就有了在我们创建 Vue 实例时，文档中经常使用vm这个变量名来表示 Vue 实例。
什么是 MVVM 模型
我们知道了 Vue 借鉴了 MVVM模型的原理，但是我们只知道借鉴这件事，却不知道什么是MVVM模型，这里简单说明一下什么是 MVVM 模型。
MVVM (Model-View-ViewModel) 就是将其中的 View 的状态和行为抽象化，MVVM 模式和 MVC 模式一样，主要目的是分离视图和模型，MVVM 旨在利用 WPF 中的数据绑定函数，通过从视图层中几乎删除所以 GUI 代码，更好地促进视图层开发与模式其余部分的分离，不需要用户体验开发人员编写 GUI 代码，他们可以使用框架标记语言，并创建到应用程序开发人员编写和维护的视图模型的数据绑定。如下图所示：
MVVM模型主要是为了分离视图(View)和模型(Model)，其优点为：低耦合、可重用性、独立开发以及可测试。 视图和模型分离的特点给了 Vue 很大的启发。
MVVM的组成部分
在 MVVM 模式中的组成部分分为以下四种：
- Model(模型)：代表真实状态的内容，即数据访问层(包含数据实体以及数据实体的操作)
- View(视图)：用户能在屏幕上看到的结构、布局和外观，负责数据显示以及交互方面
- ViewModel(视图模型)：暴露公共属性和命名的视图的抽象，将Model和View进行绑定，两者在进行数据更改时能实时刷新。ViewModel能够观察到数据的变化，并对视图对应的内容进行更新；ViewModel能够监听到视图的变化，并能够通知数据发生变化。
- 绑定器：在视图模型中，在视图与数据绑定器之间进行通信。
Vue中的实现
MVVM即模型-视图-视图模型。模型指的是后端传递的数据；视图指的是所看到的页面。视图模型是mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
所以说得到MVVM模型启发的Vue，其核心就是实现了DOM监听与事件绑定，如下一个经典图例：
MVVM模型在Vue中的应用
举一个简单的 Vue 案例，来说明 MVVM 的主要三种组成部分在 Vue 中分别代表什么，如下：
<body>
<div id="id">
<h1>姓名：{{name}}</h1>
<h1>国籍：{{address}}</h1>
</div>
<script>
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
const vm = new Vue({
data:{
name:'张三',
address:'中国'
}
})
vm.$mount('#id')
console.log(vm);
</script>
</body>
Model：模型层，data里面的数据，表示JS的对象
View：视图层，HTML内容部分，表示HTML中能操作的DOM元素
ViewModel：充当连接视图和数据的中间人，即就是定义了 Observer 观察者身份，即桥梁
当然 MVVM 模型的思想不仅仅只应用在 Vue 上面，其他主流的前端框架也都能看到 MVVM 模型的影子。希望看完这篇文章，能够帮助你对 MVVM 模型有了更深一步的了解。
到此这篇关于Vue MVVM模型超详细讲解的文章就介绍到这了,更多相关Vue MVVM模型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue组件复用和扩展，对vue感兴趣的同学，可以参考下2021-05-05
这篇文章主要介绍了vue解决跨域问题，本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
这篇文章主要介绍了vue项目自动设置请求状态的配置方法,本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-06-06
Vue报错Syntax Error:TypeError: this.getOptions is not a
前几天在vue运行项目过程中报错了,所以下面这篇文章主要给大家介绍了关于Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了vue自适应布局（postcss-px2rem）的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2022-05-05
vue中Npm run build 根据环境传递参数方法来打包不同域名
这篇文章主要介绍了vue项目中Npm run build 根据环境传递参数方法来打包不同域名,使用npm run build --xxx，根据传递参数xxx来判定不同的环境，给出不同的域名配置，具体内容详情大家参考下本文2018-03-03
Vue3+TS+Vant3+Pinia(H5端)配置教程详解
这篇文章主要介绍了Vue3+TS+Vant3+Pinia(H5端)配置教程详解,需要的朋友可以参考下2023-01-01
最近项目需要将原vue项目结合ts的使用进行改造，本文从安装到vue组件编写进行了说明，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
Axios是一个基于Promise用于浏览器和nodejs的HTTP客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,下面这篇文章主要给大家介绍了关于vue中使用axios最详细教程的相关资料,需要的朋友可以参考下2022-08-08
vue+elementUI实现动态合并数据相同的单元格(可指定合并列)
这篇文章主要介绍了vue+elementUI如何实现动态合并数据相同的单元格,文中有详细的代码实例供大家参考,具有一定的参考价值,需要的朋友可以参考下2023-07-07
最新评论