专栏首页云瓣从Vue.js窥探前端行业

从Vue.js窥探前端行业

近年来前端开发趋势

1.旧浏览器逐渐淘汰,移动端需求增加:

旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的;IE9+、chrome、sarafi、firefox对ES5是完全支持的,移动端大部分浏览器是基于webkit内核,所以ES5在移动端也是全面支持的,因此vue可以在移动端以及现代浏览器中大显身手。

2.前端交互越来越多,功能越来越复杂:

现在的前端可谓是包罗万象,比如高大上的技术库和框架、酷炫的运营活动页面、H5小游戏,当然前端技术的应用在更多具有商业价值的应用上,比如下图。

3.架构从传统后台MVC向REST API+ 前端 MV*(MVC、MVP、MVVM) 迁移

在传统的MVC下,当前前端和后端发生数据交互后会刷新整个页面,从而导致比较差的用户体验。因此我们通过Ajax的方式和后端REST API作通讯,异步的刷新页面的某个区块,来优化和提升体验,同时把MVC拿到前端来做

MVVM框架

1.MVVM框架基本概念:它主要包括各部分View、ViewModel、Model,如下图。在MVVM架构下,视图和数据是不能直接通讯的,它会通过ViewModel这个中间件来通讯。ViewModel起的是一个观察者的职位:当数据变化,ViewModel观察到变化,并通知视图做相应的更新;而用户操作视图,ViewModel也能监听到变化,然后通知数据做改动,从而实现了数据的双向绑定。

2.MVVM框架的应用场景

MVVM框架针对具有复杂交互逻辑的前端应用,它提供了基础的架构抽象,并且通过Ajax数据持久化,保证前端用户体验。

所以MVVM框架的好处显而易见:当前端对数据进行操作的时候,可以通过Ajax请求对数据持久化,而不必刷新整个页面,只需改变dom里需要改变的那部分数据内容。特别是在移动端,刷新页面的代价太昂贵。虽然有些资源会被缓存,但是页面的dom、css、js都会被浏览器重新解析一遍,因此移动端页面通常会被做成SPA单页应用。由此在这基础上诞生了很多MVVM框架,比如Angular.js、react.js、vue.js。

Vuejs以及其生态

vue.js是由国内的大牛尤雨溪为主要开发的,它起初是个人项目,在2014年初开源就受到广泛关注。起初尤大神把它定位是一个视图库而非框架,但随着vue-router,vue-resource等第三方库的发展,Vuejs逐渐成长为一个框架。

1.它是一个轻量级MVVM框架(只有20来kb)

2.核心思想

  ①数据驱动:数据(model)改变驱动视图(view)自动更新,DOM是数据的一种自然映射

  ②组件化:扩展HTML元素,封装可重用的代码

4.github超过35K+的star数,社区完善 

Vue vs Angular React 

Vue官网已对各个主流框架进行了比较详细的对比分析(中文版地址),下面进行简单地总结下;

Vue.js更轻量,gzip后大小只有20k+。Angular有56K,React有44K。

Vue.js相对来说学习曲线比较平稳。

Vue.js吸取了两家之长,借鉴了Angular的指令和react的组件化。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webpack配置React开发环境(上)

    Webpack 是一个前端资源加载/打包工具,我们部门的一条主要技术栈就是Webpack+React+ES6+node,虽然之前自己做个人项目也接触好多次Web...

    牧云云
  • JS 异步系列 —— Promise 札记

    牧云云
  • 打包优化实践(如何Code Spliting)

    开发环境中可使用 analyze-webpack-plugin 观察各模块的占用情况。以该项目为例:浏览器中输入 http://localhost:3000/a...

    牧云云
  • Trystack创建实例并通过ssh远程登录虚拟机

    tanmx
  • 为什么 Javascript 经常被黑?

    桃翁
  • 建立缓存,防高并发代码demo

    我在之前的博客中提到过——缓存并发,当一个key过期时,访问这个key的请求量过大,穿透到数据库.解决办法:1,分布式锁,保证每个key同时只有一个线程去查询数...

    算法之名
  • 基于hadoop生态圈的数据仓库实践 —— OLAP与数据可视化(六)

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

    用户1148526
  • Educational Codeforces Round 55 (Rated for Div. 2) B. Vova and Trophies(思维模拟)

    题目链接:http://codeforces.com/contest/1082/problem/B

    Ch_Zaqdt
  • npm scripts的生命周期管理

    我们平时阅读一些开源项目,可能会发现有些项目的package.json里的scripts区域定义的脚本很复杂,令人眼花缭乱。

    Jerry Wang
  • 04.LoT.UI 前后台通用框架分解系列之——轻巧的弹出框

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:h...

    逸鹏

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动