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

栏目: JavaScript · 发布时间: 7年前

内容简介:旧浏览器逐渐被淘汰,移动端需求增加,旧浏览器是指ie6-ie8是不支持es5的,而vuejs利用了Object.defineProperty特性,es5在移动端和pc端也都是支持的,所以vuejs可以在移动端和pc端充分发挥自己的长处,架构从传统后台MVC向REST api+前端MV*迁移。当前前端和后端发生一些数据交互的时候,会刷新整个页面,这样的用户体验是非常差的,因此我们通过ajax的方式和后端REST API做通讯,异步刷新页面的某个区块来优化和提升体验,同时把MV*拿到前端来做。随着前端这些需求

近些年来前端的发展的趋势

旧浏览器逐渐被淘汰,移动端需求增加,旧浏览器是指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思想


以上所述就是小编给大家介绍的《vue轻量高效的前端组件化方案以及MVC MVVM思想》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Growth Hack 這樣做

Growth Hack 這樣做

Xdite / PCuSER電腦人文化 / 2016-5-7 / 300.00台幣

◎具體教你在預算有限的情況之下,把成長做出來的可行與必要方法! ◎帶動台灣成長駭客話題的專業講師,親授讓產品突破80分的成長秘笈 @這本書要給誰看? 1. 創業者、個人品牌經營者,想要提高自己服務轉換率的人。 2. 空有產品,但是賣不出去,花了錢投廣告卻效果低落的人。 @這本書有什麼不一樣? 1.全球最重要的趨勢,台灣最知名的 Growth Hack 講師 Xd......一起来看看 《Growth Hack 這樣做》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具