热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

结合vue、react、angular简谈MVC、MVVM框架

React如其官方介绍:React-AJavaScriptlibraryforbuildinguserinterfaces,React是一个为数据提供渲染为HTML视图的开源JavaScript库。从这个定义来看,可以发现React是一个View层,它的作用是提供了一套数据机制。用了virtualdom,属于facebook公司的vue的官方文档是说vue

React
如其官方介绍:React - A Javascript library for building userinterfaces, React是一个为数据提供渲染为HTML视图的开源Javascript库。从这个定义来看,可以发现React是一个View层,它的作用是提供了一套数据机制。用了virtual dom,属于facebook公司的

vue的官方文档是说vue的核心库也只是关注视图(View)层。
结合vue、react、angular简谈MVC、MVVM框架

所以,实际上来说,和angular有完整的解决方案不同,狭义的vue.js和react.js实际上只是library,还并不是一个framework,因为他们没有一整套的解决方案,属于一种“小而美”框架

换句话来说,现在我们所讨论的vue、react,都是我们将他们武装之后,他们有了一整套解决方案了。成为了一个框架,我们再来讨论他们的架构模式,属于一种“大而广”框架。
结合vue、react、angular简谈MVC、MVVM框架

Vue

个人认为,这是毫无争议的一个MVVM框架,对MVVM理念的贯彻也是最显而易见的。
关于渐进式框架的理解
https://baijiahao.baidu.com/s?id=1647203004323024188&wfr=spider&for=pc

Model层:接口层,原始数据模型。

View层:视图层,template中的html代码。

ViewModel层:基于一个html元素构建的vue实例。将Model中的原始数据模型,构建成一份View层可以使用的视图模型。这个时候,Model层、View层完全解耦。开发者已经完全不需要顾及View的展示更新了,只需要专注业务逻辑以及ViewModel层与Model的交互逻辑就ok。

AngularJs

Model层:接口层,原始数据模型。

View层:html页面。

ViewModel层:基于ng-app构建的应用实例,与vue类似,数据双向绑定机制不同。

React

Model层:接口层,原始数据模型。

View层:编译之后的Dom。

ViewModel层:基于jsx语法,以及react构建的VDom,单向数据流。

这么一看,vue、react、angularJS不就都是MVVM框架吗?唯一的区别就是,VM层中的Model与View,vue与angular是数据双向绑定,而react由于是单向数据流,所以需要手动更改状态。
参考链接:
https://zhuanlan.zhihu.com/p/76988636
https://zhuanlan.zhihu.com/p/64257809
其他的参考链接:
https://www.cnblogs.com/zhouyangla/p/6936455.html
https://blog.csdn.net/qq_18832439/article/details/51038454
https://www.jianshu.com/p/11c89d58d5d5
https://blog.csdn.net/qq_36228442/article/details/79470408


推荐阅读
  • Java和JavaScript是什么关系?java跟javaScript都是编程语言,只是java跟javaScript没有什么太大关系,一个是脚本语言(前端语言),一个是面向对象 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ... [详细]
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • [译]技术公司十年经验的职场生涯回顾
    本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同,令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望,认为人类有能力不断改善自己。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • CentOS 7部署KVM虚拟化环境之一架构介绍
    本文介绍了CentOS 7部署KVM虚拟化环境的架构,详细解释了虚拟化技术的概念和原理,包括全虚拟化和半虚拟化。同时介绍了虚拟机的概念和虚拟化软件的作用。 ... [详细]
  • 本文介绍了如何使用Express App提供静态文件,同时提到了一些不需要使用的文件,如package.json和/.ssh/known_hosts,并解释了为什么app.get('*')无法捕获所有请求以及为什么app.use(express.static(__dirname))可能会提供不需要的文件。 ... [详细]
  • 小程序自动授权和手动接入的方式及操作步骤
    本文介绍了小程序支持的两种接入方式:自动授权和手动接入,并详细说明了它们的操作步骤。同时还介绍了如何在两种方式之间切换,以及手动接入后如何下载代码包和提交审核。 ... [详细]
  • 本文介绍了Sencha Touch的学习使用心得,主要包括搭建项目框架的过程。作者强调了使用MVC模式的重要性,并提供了一个干净的引用示例。文章还介绍了Index.html页面的作用,以及如何通过链接样式表来改变全局风格。 ... [详细]
  • 本文介绍了响应式页面的概念和实现方式,包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点,提出了选择方案的建议。同时,对于响应式页面的需求和背景进行了讨论,解释了为什么需要响应式页面。 ... [详细]
  • 本文介绍了MVP架构模式及其在国庆技术博客中的应用。MVP架构模式是一种演变自MVC架构的新模式,其中View和Model之间的通信通过Presenter进行。相比MVC架构,MVP架构将交互逻辑放在Presenter内部,而View直接从Model中读取数据而不是通过Controller。本文还探讨了MVP架构在国庆技术博客中的具体应用。 ... [详细]
author-avatar
手机用户2502900545
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有