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. Trie树模板1字符串统计

    Trie树模板1字符串统计 我们首先来了解一下字典树,首先看一下一张字典树的图片 字典树就是一个可以高效存储.查找字符串的树,比如上面这个字典树就是存储abc,acb,bac的字典树. 1.插入操作( ...

  2. 第十五天python3 文件IO(一)

    一.文件打开 open(path,flag[,encoding][,errors]) 参数说明: path:要打开文件的路径 flag:打开方式( r:以只读的方式打开文件,文件的描述符放在文件开头 ...

  3. python获取线程返回值

    python获取线程返回值 前言 工作中的需求 将前端传过来的字符串信息通过算法转换成语音,并将语音文件返回回去 由于算法不是我写的,只需要调用即可,但是算法执行速度相当缓慢 我的优化思路是,将前端的 ...

  4. YII容器类依赖注入

    程序 = 算法 + 数据结构 数据结构 制约了 算法的===>>>>依赖注入 依赖注入也就是解数据结构和算法耦合的思想 <?php /** * Created by Ph ...

  5. mybatis 05: mybatis中的动态代理

    mybatis中动态代理存在的意义 图示 图示分析 分层说明:界面层为第一层,业务逻辑层(接口层 + 实现层)为第二层,数据访问层(接口层 + 实现层)为第三层 业务逻辑层和数据访问层:分别分两层来开 ...

  6. 牛客网 十二桥问题(状压DP)

    https://ac.nowcoder.com/acm/contest/1104/B 注意到\(\text{K}\)只有\(12\),因此对起点与每个毕经边对应的点单源最短路,\(\text{DP}\ ...

  7. 使用dotnet-monitor分析在Kubernetes的应用程序:Sidecar模式

    dotnet-monitor可以在Kubernetes中作为Sidecar运行,Sidecar是一个容器,它与应用程序在同一个Pod中运行,利用Sidecar模式使我们可以诊断及监控应用程序. 如下图 ...

  8. 【java】基础1-字符串、堆、栈、静态与引用类型

    /*结论:1,一般变量(int,float,boolean..)使用==比较,引用类型(String,int[],对象)使用equals比较.2,一般的变量存放在栈中,new出来的对象都存放在堆中,字 ...

  9. 常用的SSH,你了解多少?(长文警告)

    1.SSH工作原理 从ssh的加密方式说开去,看下文 1.1.对称加密 客户端和服务端采用相同的密钥进行数据的加解密,很难保证密钥不丢失,或者被截获.隐藏着中间人攻击的风险 如果攻击者插在用户与远程主 ...

  10. 安装配置华为Fusion acces(Lite AD)并使Windows登录

    安装Fusion access虚拟机 根据自己情况自定义 点击编辑虚拟机设置 添加镜像 点击确定并开启此虚拟机 选择第二个 Install 添加Network:修改hostname:修改密码 回车添加 ...