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模式的资料请关注脚本之家其它相关文章！
相关文章
使用elementUI表单校验函数validate需要注意的坑及解决
这篇文章主要介绍了使用elementUI表单校验函数validate需要注意的坑及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要为大家详细介绍了vue Draggable实现拖动改变顺序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了Vue项目history模式下微信分享爬坑总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
本文主要介绍了FastApi+Vue+LayUI实现前后端分离的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
elementui el-upload一次请求上传多个文件的实现
使用ElementUI Upload的时候发现如果是默认方案,上传多张图片并不是真正的一次上传多张,本文就来介绍一下elementui el-upload一次请求上传多个文件的实现,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
这篇文章主要介绍了浅谈vuex actions和mutation的异曲同工 ，详细的介绍了actions和mutation的使用和区别，非常具有实用价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
这篇文章主要介绍了在IDEA中安装vue插件全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了仿照Element-ui实现一个简易的$message方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要介绍了在vue中使用Base64转码的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue iview 隐藏Table组件里的某一列操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论