一、web倒退历史

Web是World Wide Web的简称，中文译为万维网

咱们能够将它布局成如下的几个时代来进行了解

  • 石器时代
  • 文化时代
  • 工业革命时代
  • 百花齐放时代

石器时代

石器时代指的就是咱们的动态网页，能够观赏一下1997的Apple官网

最早的网页是没有数据库的，能够了解成就是一张能够在网络上浏览的报纸，直到CGI技术的呈现

通过 CGI Perl 运行一小段代码与数据库或文件系统进行交互，如过后的Google（1998年）

文化时代

ASP，JSP大家应该都不会太生疏，最早呈现于 2005 年左右，先后呈现了微软的 ASP 和 Java Server Pages [JSP] 等技术,取代了 CGI ，加强了 WEB 与服务端的交互的安全性，相似于上面这样，其实就是Java + HTML

<%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>JSP demo</title></head><body>  <img src="http://localhost:8080/web05_session/1.jpg" width=200 height=100 /></body></html>

JSP有一个很大的毛病，就是不太灵便，因为JSP是在服务器端执行的，通常返回该客户端的就是一个HTML文本。咱们每次的申请：获取的数据、内容的加载，都是服务器为咱们返回染实现之后的 DOM，这也就使得咱们开发网站的灵便度大打折扣

在这种状况下，同年：Ajax火了(小细节，这里为什么说火了，因为 Ajax 技术并不是 2005 年呈现的，他的雏形是 1999 年)，当初看来很常见的技术手段，在过后可是宝贵无比

工业革命时代

到这里大家就更相熟了，

挪动设施的遍及，Jquery的呈现，以及SPA（Single Page Application 单页面利用）的雏形，Backbone EmberJS AngularJS 这样一批前端框架随之呈现，但过后SPA的路不好走，例如SEO问题，SPA 过多的页面、简单场景下 View 的绑定等，都没有很好的解决

这几年的飞速发展，节约了开发人员大量的精力、升高了开发者和开发过程的门槛，极大晋升了开发效率和迭代速度，咱们能够称之其为工业时代

百花齐放时代

这里没有文字，放一张图感受一下

PS：这里为什么要说这么多Web的历史，咱们能够看到Web技术的变动之大与快，每一种新的技术呈现都是一些特定场景的解决方案，那咱们明天的配角Vue又是为了解决什么呢？

咱们接着往下看

二、vue是什么

Vue.js（/vju/，或简称为Vue）

是一个用于创立用户界面的开源JavaScript框架，也是一个创立单页利用的Web利用框架。 2016年一项针对JavaScript的考察表明，Vue有着89%的开发者满意度。在GitHub上，该我的项目均匀每天能播种95颗星，为Github有史以来星标数第3多的我的项目

同时也是一款风行的JavaScript前端框架，旨在更好地组织与简化Web开发。Vue所关注的外围是MVC模式中的视图层，同时，它也能不便地获取数据更新，并通过组件外部特定的办法实现视图与模型的交互

PS: Vue作者尤雨溪是在为AngularJS工作之后开发出了这一框架。他宣称本人的思路是提取Angular中为本人所喜爱的局部，构建出一款相当轻量的框架

最早公布于2014年2月

三、Vue外围个性

数据驱动（MVVM)

MVVM示意的是 Model-View-ViewModel

  • Model：模型层，负责解决业务逻辑以及和服务器端进行交互
  • View：视图层：负责将数据模型转化为UI展现进去，能够简略的了解为HTML页面
  • ViewModel：视图模型层，用来连贯Model和View，是Model和View之间的通信桥梁

这时候须要一张直观的关系图，如下

组件化

1.什么是组件化

一句话来说就是把图形、非图形的各种逻辑均形象为一个对立的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都能够视为一个组件

2.组件化的劣势

  • 升高整个零碎的耦合度，在放弃接口不变的状况下，咱们能够替换不同的组件疾速实现需要，例如输入框，能够替换为日历、工夫、范畴等组件作具体的实现
  • 调试不便，因为整个零碎是通过组件组合起来的，在呈现问题的时候，能够用排除法间接移除组件，或者依据报错的组件疾速定位问题，之所以可能疾速定位，是因为每个组件之间低耦合，职责繁多，所以逻辑会比剖析整个零碎要简略
  • 进步可维护性，因为每个组件的职责繁多，并且组件在零碎中是被复用的，所以对代码进行优化可取得零碎的整体降级

指令系统

解释：指令 (Directives) 是带有 v- 前缀的非凡属性

作用：当表达式的值扭转时，将其产生的连带影响，响应式地作用于 DOM

  • 罕用的指令

    • 条件渲染指令 v-if
    • 列表渲染指令v-for
    • 属性绑定指令v-bind
    • 事件绑定指令v-on
    • 双向数据绑定指令v-model

没有指令之前咱们是怎么做的？是不是先要获取到DOM而后在....干点啥

四、Vue跟传统开发的区别

没有落地应用场景的反动不是好反动，就以一个高频的利用场景来示意吧

注册账号这个需要大家应该很相熟了，如下

用jquery来实现大略的思路就是抉择流程dom对象，点击按钮暗藏以后流动流程dom对象，显示下一流程dom对象

如下图(代码就不上了，上了就篇文章就没了..)

用vue来实现，咱们晓得vue根本不操作dom节点， 双向绑定使dom节点跟视图绑定后，通过批改变量的值管制dom节点的各类属性。

所以其实现思路为： 视图层应用一变量管制dom节点显示与否，点击按钮则扭转该变量，如下图

总结就是：

  • Vue所有的界面事件，都是只去操作数据的，Jquery操作DOM
  • Vue所有界面的变动，都是依据数据主动绑定进去的，，Jquery操作DOM

五、Vue和React比照

这里就做几个简略的类比吧，当然没有好坏之分，只是应用场景不同

相同点

  • 都有组件化思维
  • 都反对服务器端渲染
  • 都有Virtual DOM（虚构dom）
  • 数据驱动视图
  • 都有反对native的计划：Vue的weex、React的React native。
  • 都有本人的构建工具：Vue的vue-cli、React的Create React App 。

区别

  • 数据流向的不同。react从诞生开始就推崇单向数据流，而Vue是双向数据流
  • 数据变动的实现原理不同。react应用的是不可变数据，而Vue应用的是可变的数据
  • 组件化通信的不同。react 中咱们通过应用回调函数来进行通信的，而Vue中子组件向父组件传递音讯有两种形式：事件和回调函数
  • diff算法不同。react次要应用diff队列保留须要更新哪些DOM，失去patch树，再对立操作批量更新DOM。Vue 应用双向指针，边比照，边更新DOM。

参考文献

  • https://segmentfault.com/a/11...
  • https://zh.wikipedia.org/zh-c...
  • https://zhuanlan.zhihu.com/p/...
  • https://zhuanlan.zhihu.com/p/...
@JS语音社群