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

2,474 阅读4分钟

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

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

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

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

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

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

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

  • 针对具有复杂交互逻辑的前端应用
  • 提供基础的架构抽象
  • 通过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核心思想:

数据驱动和组件化


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



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