vue中的设计思想

vue中的设计思想主要是MV*模式,由最早的MVC(model-view-controller)框架,到后面的MVP(model-view-presenter),甚至到最后的MVVM(model-view-viewmodel)设计模式,都是vue的设计思想的模式,而今天主要来说一下MVVM的设计模式.

什么是MVC

MVC

model 数据模型

view 视图

controller 控制器

MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写

用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。

Model(模型)是应用程序中用于处理应用程序数据逻辑的部分。

View(视图)是应用程序中处理数据显示的部分。

Controller(控制器)是应用程序中处理用户交互的部分。

优点:耦合性低、重用性高、生命周期成本低、部署快、可维护性高、有利软件工程化管理 

缺点:由于模型和视图要严格的分离,这样也给调试应用程序带来了一定的困难。每个构件在使用之前都需要经过彻底的测试。

什么是MVP

MVP是单词Model View Presenter的首字母的缩写,分别表示数据层、视图层、发布层,它是MVC架构的一种演变。作为一种新的模式,MVP与MVC有着一个重大的区别:在MVP中View并不直接使用Model,它们之间的通信是通过Presenter (MVC中的Controller)来进行的,所有的交互都发生在Presenter内部,而在MVC中View会直接从Model中读取数据而不是通过 Controller。 

MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。

各部分之间的通信,都是双向的。

View 与 Model 不发生联系,都通过 Presenter 传递。

       View 非常薄,不部署任何业务逻辑,称为”被动视图”(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。

什么是MVVM

MVVM是一种设计思想,Model层代表数据模型,可以在Model代表整个webAPP所需要的数据模型,它只是数据,不具备任何行为逻辑.View代表UI组件,主要是负责将数据模型转化成UI展示出来,而ViewModel通过双向数据绑定把View和Model层链接起来,进行统一管理.

在MVVM架构下,View和Model之间是没有直接联系的,是通过ViewModel进行交互,而Model和ViewModel之间的交互式双向的,所以View数据变化可以同步在Model中,而Model数据的变化也会反应在View上

vue基础之MV*和它们之间的不同的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  2. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  3. vue基础知识之vue-resource/axios

    Vue基础知识之vue-resource和axios(三)   vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...

  4. Vue基础知识之vue-resource和axios

    Vue基础知识之vue-resource和axios  原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...

  5. Vue – 基础学习(1):对生命周期和钩子函的理解

    一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...

  6. [前端] VUE基础 (6) (v-router插件、获取原生DOM)

    一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...

  7. Vue基础语法-数据绑定、事件处理和扩展组件等知识详解(案例分析,简单易懂,附源码)

    前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...

  8. vue - vue基础/vue核心内容

    终于算是顺利进入vue了,确实也只有学了过后才知道,之前三过vue而不学,确实是对的,现在进来了一点都不后悔,ajax.node.js.promise.webpack.git等等确实是除了三大基础外还 ...

  9. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

随机推荐

  1. Node.js精进(10)——性能监控(下)

    本节会重点分析内存和进程奔溃,并且会给出相应的监控方法. 本系列所有的示例源码都已上传至Github,点击此处获取. 一.内存 虽然在 Node.js 中并不需要手动的对内存进行分配和销毁,但是在开发 ...

  2. idea的使用技巧和必要的设置

    idea 如何开启多个线程 打开下面按钮,然后运行相同的代码即可 打开idea需要选择打开哪一个项目 * 设置如下,关闭下面选项即可

  3. 造!又有新的生产力语言了「GitHub 热点速览 v.22.30」

    作者:HelloGitHub-小鱼干 你还记得那些 PHP 开发都去哪了吗?转 Golang 了!移动端现在流行什么?Flutter 编程.现在谷歌带着新的生产力语言来了,Carbon,代号:C++ ...

  4. 从零开始在centos搭建博客(一)

    本篇为安装篇. 基于centos 7.9,大部分东西使用docker安装. 软件列表:docker + mysql + wordpress 安装docker yum install -y yum-ut ...

  5. Nginx 平滑升级、Nginx的一些基础配置

    # Nginx 平滑升级 # 方案一:使用Nginx服务信号进行升级 # 1.将就版本的sbin目录下可执行nginx进行备份(mv nginx nginxold) # 2.将新版本 configur ...

  6. 如何给MySQL添加自定义语法 ?

    目录 1 背景 2 新增关键词(token) 3 新增语法 4 类似于PT_partition添加对应的数据结构global_partition_clause 1 背景 MySQL语法解析器用的bis ...

  7. [LNOI2022]盒

    \(LNOI2022\)盒 由于是加的形式,那么可以套路的拆贡献,枚举每条边的贡献就好了 \(40pts\) //比较显然的事情 //首先确定了一个B数组之后 //最小的移动应该是 //设左右两侧比原 ...

  8. ShadeRec类定义

    这个类主要是用于记录碰撞数据的类,书中已经说的很清楚了.这个类之后会慢慢扩展,会在本随笔中扩展,先定义简单的,方便编译看看效果. 类声明(World是之后主程序中的类,最后测试时再实现): #ifnd ...

  9. 新一代大数据任务调度系统 - Apache DolphinScheduler 1.3.4 发布,推荐下载

    | 本文编辑:朱桐 新一代大数据任务调度 - Apache DolphinScheduler(incubator) 在经过社区 30 多位小伙伴的贡献与努力下于发布了 1.3.4 版本,1.3.4 作 ...

  10. Apache DolphinScheduler 迎来 2 位 PPMC

    经过 Apache DolphinScheduler PPMC 们的推荐和投票,我们高兴的宣布:Apache DolphinScheduler 迎来了 2 位 PPMC .他们是(github id) ...