未加星标

vue轻量高效的前端组件化方案以及MVC MVVM思想

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏
近些年来前端的发展的趋势

旧浏览器逐渐被淘汰,移动端需求增加,旧浏览器是指ie6-ie8是不支持es5的,而vuejs利用了Object.defineProperty特性,es5在移动端和pc端也都是支持的,所以vuejs可以在移动端和pc端充分发挥自己的长处,架构从传统后台MVC向REST api+前端MV*迁移。

MVC到REST api+前端MV*:

当前前端和后端发生一些数据交互的时候,会刷新整个页面,这样的用户体验是非常差的,因此我们通过ajax的方式和后端REST API做通讯,异步刷新页面的某个区块来优化和提升体验,同时把MV*拿到前端来做。

随着前端这些需求的变化,其实会对前端产生一些新的需求,我们希望在前端有一个良好组织架构和对前端的代码量和开发和效率和可维护性都有了一定的要求,那么vuejs就应用而生了

MV*是指MVC,MVP,MVVM等框架,vuejs是MVVM框架
vue轻量高效的前端组件化方案以及MVC MVVM思想

model是指数据部分,对应到前端就是javascript对象。

view是视图部分,对应到前端就是dom

viewmodel就是链接view和model的中间线,

在mvvm架构下,视图和数据部分是不能直接通讯的,他通常通过viewmodel来做通讯,viewmodel要实现一个observer的角色,当数据发生变化,viewmodel能观察到数据的变化,然后通知到对应的视图做视图更新,而当用户操作视图,viewmodel也能监听到视图的变化然后通知数据做改动,这实际上就实现了数据的双向绑定

应用场景MVVM的yi并且他有什么好处: 针对具有复杂交互逻辑的前端应用 提供基础的架构抽象 通过ajax数据持久化,保证前端用户体验 它的好处:

前端对数据做一些交互的时候,可以通过ajax数据持久化,不需要刷新整个页面,只需要刷新当前dom对应的那部分数据和内容,特别是移动端应用场景,刷新页面的代价太昂贵,会重新加载很多资源dom,css,js都会被浏览器重新解析一遍,因此,移动端页面都会写成SPA单页应用。在这个基础上,就诞生了许多mvvm框架:angularjs,reactjs,vuejs

vuejs是什么

在2014年年初开源的时候,尤雨溪大神说过它的定位是一个视图层库并不是一个框架,但是随着vue-router和vue-resource的推出,他已经成长为一个框架了,他是一个轻量级MVVM框架,它的体积很小,他是一个数据驱动+组件化的前端开发, 数据驱动和组件化是vuejs的核心思想,github社区很完善

vuejs和angularjs和reactjs对比(如何做技术选型)

选型有一个很重要的参考,就是看他的社区如何,不过只看社区做技术选型是远远不够的,因为这三者社区都是很棒的,除了看社区还要对比其他地方,

vuejs更轻量,gzip后大小只有20k+,angular有56k,react有44k,所以对于移动端来说vuejs更适合 vuejs更易上手,学习曲线平稳。angular入门是最难的,因为它的概念太多,完全颠覆了之前前端开发的模式和思维,比如一些依赖和注册,完全不知所云。angular是一帮搞java的工程师写的,很多思想都延用了后端的知识,所以对新手前端来说是一个非常大的挑战。 react和angular比相对好些,不过他也有他自己的一套jsx语法,这个对一些新手来说也是很大的挑战,而且react学习会附有react全家桶,包括react-router等,学习曲线也是比较陡峭的。 而vuejs上手比较简单,开发组件和语法也更符合习惯,官网很完善很简单,demo也很容易懂。 vuejs吸取了两家之长,借鉴了angular的指令和react的组件化,总能看到angular和react的影子,但是他也有其他两家没有的比如computed。 vuejs核心思想:

数据驱动和组件化


vue轻量高效的前端组件化方案以及MVC MVVM思想

数据改变省去了手动更改dom变化


vue轻量高效的前端组件化方案以及MVC MVVM思想
vue轻量高效的前端组件化方案以及MVC MVVM思想

每个组件都对应着一个viewmodel,最终生成一个viewmodel树


vue轻量高效的前端组件化方案以及MVC MVVM思想

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:vue轻量高效的前端组件化方案以及MVC MVVM思想
本站链接:https://www.codesec.net/view/621034.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(37)