前端框架 Vue.js 全面介绍

Vue.js 是一个 JavaScript MVVM 库，也是一套构建用户界面的渐进式框架。官网：https://cn.vuejs.org/。它以数据驱动和组件化思想构建，采用自底向上增量开发。

2016 年很火的前端框架当属 Vue。不少用过的人评价它“兼具 Angular.js 和 React.js 的优点，并剔除了它们的缺点”。作者是华人尤雨溪（Evan You）。相对 Angular.js，Vue 的 API 更短、更好懂，上手更快。

一、调试插件与 UI 组件库

Vue Devtools

调试可以装 Chrome 插件 Vue Devtools。打开 Vue 项目后，在控制台切到 Vue 面板：选组件看组件内数据，也可以切 Vuex 看状态变量。

Element 等 UI 库

个人不推荐一上来就用 UI 组件库，自己造轮子更有成就感。如果更看重效率，并且选了 Vue 2.0，饿了么的 Element 是当时很稳的选择。GitHub：https://github.com/ElemeFE/element，更新频繁，虽偶有不稳定，但口号就是“快速成型，就为让你少加班”。

二、Vue、React、Angular 1 对比

性能

Angular 1 在 scope 里每次数据变化都会触发 watcher 重算。它对常用 DOM 事件、XHR 做了封装，进入 digest：从 rootScope 遍历检查所有 watcher。若某个 watcher 又触发更新，脏检查循环可能跑多次。Vue 用基于依赖追踪的观察系统加异步队列更新，数据变化独立触发，除非数据之间有明确依赖。

官方宣称渲染性能优于 React，并做了渲染 10000 个列表项 100 次的对比项目：https://github.com/chrisvfritz/vue-render-performance-comparisons。每个参照跑 20 次取最好结果：

可见 Vue 远好于 Angular 1，并略优于 React。

社区与生态

Angular 1 背后是 Google，Tutorial 到 Stack Overflow 都完整。但 2.0 几乎推翻重做，1.x 项目很难平滑升级，当时线上仍以 1.x 居多，版本鸿沟影响信心。

Vue 和 React 都有强社区。React 有 Flux、Redux；Vue 有 Vuex。两者都有路由库应对大型应用。Vue 的路由和状态库由官方维护；React 把这些问题交给社区，生态更分散也更繁荣。Vue 还提供 vue-cli，带着 Webpack、Browserify 甚至路由，搭项目很容易。

学习曲线

Vue 把指令和组件分得更清：指令只封装 DOM 操作，组件是自给自足的视图加数据逻辑。Angular 1 里两者常混在一起，API 也更复杂。个人感觉 Angular 1 和 React 更陡，Vue 更接近前端习惯。作者是中国人，中文官网、教程和迁移说明都很全，甚至有迁移工具。

用法也很简单：本地建一个 .html，引入 Vue，就能写 Hello World。

原生渲染：React Native 与 Weex

React Native 能用同一套组件模型写 iOS / Android 原生渲染。2016 年 9 月 JSConf 期间，尤雨溪宣布加盟 Weex 任技术顾问。Weex 是阿里的跨平台 UI 框架，JS 运行时就是 Vue，于是 Vue 语法写的组件不但能跑在浏览器，还能做 iOS / Android 原生应用。

尤雨溪原话大意：Weex 选 Vue 做运行时让他很高兴；把 Vue 开发体验扩到原生是他一直想做却没余力的事；想到能用 Vue 语法写 Web / Android / iOS 三端通用组件就很兴奋。

当时的短板

再火也有缺点：相对 Angular、React，成熟度和社区活跃度还不是对手；明确放弃 IE8。招聘里写 Angular 经验的仍多于 Vue，影响力当时还差一截。

三、全家桶与工程目录

著名全家桶：vue-router（http://router.vuejs.org）、vuex（http://vuex.vuejs.org）、vue-resource（https://github.com/pagekit/vue-resource）。加上 vue-cli，就是项目核心。

vue-router

推荐 npm 安装：

npm install vue-router

import Vue、Router 和页面组件（本例 Goods、Ratings、Seller），模块化工程里必须 Vue.use(Router)，否则会 undefined。

import Vue from 'vue'
import Router from 'vue-router'
import Goods from '@/components/goods/goods'
import Ratings from '@/components/ratings/ratings'
import Seller from '@/components/seller/seller'
Vue.use(Router) // 需要 import Vue 和 Router，不然会报错 undefined

用 new VueRouter() 传入 path 和 components；创建根实例时通过 router 注入，整个应用才有路由。

Vuex 状态管理

Vuex 是专为 Vue 应用的状态管理模式：集中存储所有组件状态，按规则可预测地变化。已集成进 Vue Devtools，状态变化能直接看。

项目一大，多个父组件各带一堆子组件时，事件从哪派、该听谁，父组件会和子组件耦死，逻辑散落难维护。这就是 Vuex 要解决的问题。四个核心概念：

• The state tree：单一状态树，一个对象包含全部应用级状态，作为唯一数据源 SSOT，每应用一个 store。调试时能给整个状态做快照。
• Getters：从 store 取组件要用的数据。
• Mutations：事件处理器，驱动状态变化（原文写成 Mutators）。
• Actions：给组件调用的函数，去提交 mutations。

和普通全局对象不同：从 store 读到的状态变了，对应组件会高效更新；改状态的唯一途径是 store.commit mutations，每次变化都留痕。

最简单的例子：

安装后创建一个 store，提供初始 state 和一些 mutations，然后用 store.state 读、store.commit 改。

vue-resource

体积小，支持 IE9+，支持 Promise。安装：

$ npm install vue-resource

引入后既可挂在全局 Vue 上用 http，也可挂在某个实例上：

请求后用 then 处理：第一个参数成功回调，第二个失败回调。API 按 REST 设计，共 7 种：

get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

工程目录

一个简单 Vue 项目大概长这样，各文件夹约定如下：

• components/：Vue 组件。建议把组件用到的图片放到对应子目录，方便管理
• node_modules/：npm 依赖
• vuex/：store 相关（state、actions、mutations）
• router/：vue-router 配置
• build/：webpack 打包编译配置
• static/：少变动的图片或 CSS
• config/：端口等配置
• dist/：一开始没有，build 之后才产出
• App.vue：根组件，子组件都在这引用
• index.html：入口，引用根组件
• main.js：入口 JS，打包后注入 index.html

在 Vue 里用 Less

需要 npm 安装 less-loader，再在单文件组件的 style 上标明 lang，打包时会生成对应 CSS。

四、核心功能：计算属性、模板、组件、过渡

计算属性

购物车结算里，总额随数量、选中种类、单价变。若把这些动态量全塞进模板，逻辑又臭又长。复杂逻辑请用计算属性：模板里只写 {{ totalPrice }}，计算写在 computed 里。

和方法的差别：计算属性按依赖缓存，只有 price、count 变了才重算；依赖不变时多次访问直接返回上次结果。

模板语法

基于 HTML 的模板，声明式地把 DOM 绑到实例数据。模板都是合法 HTML。包括双大括号插文本、v-html 插 HTML、v-bind 绑对象，以及类似 Angular 的 v-if、v-show、v-for 和过滤器。

组件化

组件是 Vue 最强大的功能：封装可复用代码，传入不同对象就复用。例如先写 star.vue 画五角星，再在别的文件 import 并注册，就能用 <star> 标签。

组件作用域孤立，子模板不能直接碰父数据，必须用 props 声明期望数据。本例是 size 和 score，父组件传入大小和分数来定制。

过渡效果

插入、更新、移除 DOM 时可用 transition 封装组件。配合 v-if / v-show，Vue 会在合适时机加 entering / leaving 的 class。把元素放进 <transition name="slide-fade">，再写对应 CSS 即可。

五、谁在用、学什么

不完全统计：饿了么、苏宁易购、美团、天猫、Laravel、htmlBurger 等国内外公司都在用 Vue 做新项目或前端重构。vue + vuex + axios + vue-router + webpack + ES6 + less 也越来越常见。

基础学习视频：https://scrimba.com/playlist/pXKqta

原文：https://baijiahao.baidu.com/s?id=1587075843882427601&wfr=spider&for=pc

一句话总结：Vue 用渐进式、数据驱动和官方全家桶把中小到大型 SPA 串起来；先搞清组件、计算属性和 Vuex，再谈对比和跨端。