VUE2中的MVVM模式详解
MVVM 模式
官方解释：Vue 虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。
什么是 MVVM 模式？
MVVM 是一种新的开发模式，对比传统模式，例如我们要更新 DOM ，一般都是通过 JavaScript 处理数据然后操作 DOM API 将数据渲染到页面上。后续每一次修改数据后，都要重新调用 DOM API 进行数据渲染。当用户操作表单信息后，也要将数据同步到 JavaScript 数据中，这一系列操作将会变得很繁琐。而在 MVVM 模式中，我们只要关心数据层面，而不需要关心渲染逻辑层面，假设我们修改 JavaScript 中的数据后，Vue 会自动实时将数据渲染到页面上，当我们操作视图中表单的数据时，Vue 也会实时的将数据同步到 JavaScript，并不需要我们自己手动调用操作 DOM API 的一系列操作。
MVVM 主要分为 Model、View、ViewModel 三者
- Model：代表数据模型，数据和业务逻辑都在 Model 层中定义
- View：代表 UI 视图，负责数据的展示
- ViewModel：负责监听 Model 中数据的改变并且控制视图的更新
MVVM 模式简化了界面与业务的依赖，解决了数据频繁更新。MVVM 在使用当中，利用双向绑定技术，使得 Model 变化时，ViewModel 会自动更新，而 ViewModel 变化时，View 也会自动变化。
以下通过代码的方式进行了解 Model、View、ViewModel
<template>
<div id="app">{{ message }}</div>
</template>在 template 中的代码就相当于 View 视图层
const app = new Vue({
el: '#app',
data: function () {
return {
message: 'Hello Vue!'
}
}
})其中选项 data 就是 Model 数据层，而 new Vue 则是 ViewModel 控制层，负责监听数据层发生变化，更新视图层。监听视图层发生变化更新数据层。
以上就是VUE2中的MVVM模式详解的详细内容，更多关于VUE2 MVVM模式的资料请关注脚本之家其它相关文章！
相关文章
vue3组合API中setup、 ref、reactive的使用大全
本文给大家介绍vue3组合API中setup、 ref、reactive的用法，初步了解reactive的使用及具体用法，通过示例代码给大家介绍的非常详细，需要的朋友参考下吧2021-06-06
最常见的多环境配置，就是开发环境配置,和生产环境配置，本文主要介绍了vue项目多环境配置的实现，感兴趣的可以了解一下2021-07-07
这篇文章主要介绍了vue中使用element-ui进行表单验证的实例代码，本文给大家分享实现思路，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
这篇文章主要介绍了在vue中使用screenfull 依赖，实现全屏组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
这篇文章主要介绍了Vue插槽_特殊特性slot,slot-scope与指令v-slot说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要为大家详细介绍了vue iview封装模态框的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
setup函数是一个新的组件选项,作为在组件内使用Composition Api的入口点,下面这篇文章主要给大家介绍了关于vue3.0中setup的两种用法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
vue2.0采用了虚拟DOM来代替对真实DOM的操作，最后通过某种机制来完成对真实DOM的更新，渲染视图。这篇文章主要介绍了vue2.0的虚拟DOM渲染,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了vuex的几个属性及其使用传参,本文结合实例代码给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
如何使用electron将vue项目打包成.exe文件(保姆级教程)
本文给大家介绍如何使用electron将vue项目打包成.exe文件,大家要注意一下vue2项目,使用的vue-element-admin框架,用electron打包成.exe文件,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧2024-03-03
最新评论