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

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

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

MVC到REST api+前端MV*:

当前前端和后端发生一些数据交互的时候,会刷新整个页面,这样的用户体验是很是差的,所以咱们经过ajax的方式和后端REST API作通信,异步刷新页面的某个区块来优化和提高体验,同时把MV*拿到前端来作。css

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

MV*是指MVC,MVP,MVVM等框架,vuejs是MVVM框架vue

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

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

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

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

MVVM框架的应用场景而且他有什么好处:

  • 针对具备复杂交互逻辑的前端应用
  • 提供基础的架构抽象
  • 经过ajax数据持久化,保证前端用户体验

它的好处:

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

vuejs是什么

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

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核心思想:

数据驱动和组件化


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



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