Vue 学习路线

本文旨在规划 Vue 框架的学习路线，通过掌握基本概念了解框架，熟悉生态系统，最后深入至框架本身。并未涉及到框架使用方式等详细内容，对每个知识点也只是浅尝即止。

为什么选择vue

可能有很多人只是知道 Vue 这个框架，并没有详细的了解，所以在这里简单的列举下 Vue 的优势。

Vue 有着前端框架中最多的 stars，人数众多的开发者，保证了社区的繁荣。
相对来说较平滑的学习曲线，这主要取决于vue是一个渐进式框架，同时使用基础的HTML模版语法，这让有HTML经验的人很少上手。
渐进式框架也可以更好的逐步的改变原有项目。
团队中有来自世界各地的专家开发者，中文社区和文档质量相对不错。

学习路线

JavaScript与web基础

学习 Vue 框架之前必须先了解 JavaScript 与 web 开发的基本知识，就像看一本英语书前，你需要先掌握英文。
Vue 基本概念

使用 Vue 来构建项目，需要先了解一些基本概念：

渐进式框架

渐进式就是：一步一步，不需要在一开始就把所有的东西都用上。

在 Vue 上的体现就是：它的核心库只包含视图，其他的客户端路由、全局状态管理等通过核心插件提供。

Vue 在设计角度上，包含了解决构建大型单页面应用的大部分问题，但你不需要一开始就把所有的东西都用上。这就带来了较平滑的学习曲线与对老项目渐进式重构的好处。

声明式渲染
```
<div id="app">
  {{ message }}
</div>
```
```
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
```
这里的示例代码就是声明式渲染，你写出想要的结果，由框架执行渲染的命令。

响应式数据

在上面的示例代码中，数据就与 DOM 建立了关联，成为响应式数据。此时改变 app.message 的值，就可以看到页面也会发生对应改变。

组件化

组件化的核心思想就是：将页面结构映射为组件树。

组件是资源独立的，组件可以复用，组件与组件之间可以嵌套。

单页面应用与客户端路由

单页面应用（SPA）可以通过单个页面实现传统网站多个页面的功能，通过客户端路由实现加载新内容，而不需要通过浏览器跳转，重新加载页面。

Vue Router 就是 Vue 的实现，由官方维护，通过插件的形式加载。

状态管理

在 Vue 中，每个组件管理着自己的状态，如果有状态需要在多个组件间复用，就需要把共享的状态抽离出来，作为全局的状态来管理，这样，在任何组件中都能获取到。

这就是 Vuex 所做的事情。
使用 Vue 构建单页面应用

以上的基本概念用于理解 Vue，如果要将它实际应用到项目中，还需要了解更多的东西。

构建工具

Vue 提供了一个官方的 CLI：Vue CLI，为单页面应用搭建繁杂的脚手架。

最新的版本 Vue CLI3中加入了 GUI 的支持，对用户更为友好。

使用 axios 访问 Web API

Vue 的一个核心思想就是数据驱动。所谓数据驱动，是指视图是由数据驱动生成的，Vue 将数据与 DOM 关联，构建响应式数据，我们对视图的修改，不会直接修改 DOM，而是修改数据，响应至视图。

作为一个单页面应用，数据需要通过 Web API 获取，这些数据可能通过 RESTful API 或 GraphQL 提供，也可能通过 WebSocket 提供。

如果是使用的 HTTP 协议，在 Vue Cookbook 中，推荐使用基于 promise 的 axios。

测试

如果想要开发出稳定可维护的项目，测试是必不可少的。

Vue 官方团队提供了 Vue Test Utils，Vue Test Utils 通过将组件隔离挂载，然后模拟必要的输入和对输出的断言来测试。

Chrome 开发者工具

Vue.js devtools 是一个用于 Chrome 的开发者工具，使用它可以清楚的看到组件树的结构，组件的状态等信息。如果使用了 Vuex，还可以看到全局状态，并将其快照发送给其他人，这个人可以在控制台导入状态，方便定位问题。

多端支持

可以在 Weex 中使用 Vue，Vue 的官方也与 Weex 的团队加深联系，在未来的 Vue3 中，会有更好的支持。
前端技术栈

上述所讲的大多是 Vue 或 Vue 生态系统中的工具。但 Vue 并不是独立存在的，它知识前端技术栈中的一部分。

现代 JavaScript 与 Babel

Vue 应用程序可以使用 ES5 开发，这是现代浏览器都支持的 JavaScript 标准。

如果想要获得更好的开发体验，可以更新 JavaScript 标准 ES2015 或更高版本，但这会导致不支持旧版浏览器，为了解决这个问题，就需要使用 Babel，它可以将你的新语法编译为 ES5 代码。

Webpack

Webpack 是一个模块打包器，它可以将你的应用程序中各个模块的代码打包至一个或多个文件中，形成浏览器可读的 js 文件。还可以在打包过程中，对代码进行转换、使用 Babel、Sass、TypeScript 等。

虽然 Vue CLI 可以为我们构建基础的 webpack 配置，并且在新版本中，可以使用 GUI 来调整，但这并不意味着你可以不学习它，你还是不可避免的需要自行调试它的配置。

TypeScript 与 Flow

Vue2 版本中使用的是 Flow，在 Vue3 中将重构为使用 TypeScript。

这两门语言的主要目的是让 js 拥有类型系统，使用它们可以写出高健壮性的代码，并且可以编译为普通的 ES 语法。

Vue3 将完全使用 TypeScript 编写，这并不意味着你必须使用它。但是如果想要了解 Vue 源码，也是不可避免的。
Vue 生态系统

官方核心插件

上述提到的 Vue Router、Vuex，还有 Vue SSR 都是由官方维护的，这区别于 React，官方主要是考虑到了社区维护会导致更新频繁、解决方案太杂乱的问题。

官方工具

上述也提到过的 Vue devtools、Vue CLI，还有 Vue Loader，也都是基于同样的原因。但这不意味着没有社区参与，作为开源项目，依然可以提出建议，修复问题，只是官方有一个发展方向作为参考。

UI 组件库

也可以称为 UI 框架，主要是一系列常用的组件，例如 Form、Table 等常见的元素，方便快速开发。

市面上有非常多的 UI 框架可供选择，Element UI、iView、Vux 等，各有各的风格特色。
深入理解 Vue

为什么是渐进式框架

框架的存在是为了帮助我们应对复杂度 - 《Vue 2.0——渐进式前端解决方案》

当我们在做一个前端应用时，会遇许多的问题，这些问题可以称为应用复杂度，前端框架的出现，就是为了降低应用复杂度，解决一些重复的并且已经有良好解决方案的问题。

但是，框架本身由于其学习曲线，也会带来不同的复杂度，称为框架复杂度。如何权衡应用复杂度与框架复杂度就称为了一个问题。

React 与 Vue 的选择的模式就是：以可弹性伸缩的框架复杂度来应对不同的应用复杂度。框架核心库只包含视图层，其他的问题都由可选的附加库/工具来解决。

Facebook 团队只专注做 React 本身，其他的问题都是由社区贡献解决方案，社区非常活跃，也有很多优秀的想法和思路，但社区的活跃性也会带来一些副作用，版本更新太快，一个问题有太多的解决方案导致的选择困难，库与库之间可能存在的磨合问题。

Vue 的团队选择的方向就是渐进式，核心插件\工具由团队开发，负责一些大方向上的统一，同时也是模块化的，可供选择。

声明式渲染

Vue 或者说现代 js 框架，都有一个统一的看法，数据状态是唯一的真相，DOM 状态只是数据状态的映射。所有的逻辑操作都应在状态的层面进行，当状态发生改变时，DOM 在框架的帮助下自动更新至合理的状态。

那么，Vue 时如何实现的呢？主要是使用的虚拟（Virtual） DOM。

虚拟 DOM 简单来说就是使用 js 对象去描述一个 DOM 节点，它产生的前提就是一个 DOM 元素在浏览器中是非常庞大的，因为有着各种属性，各种事件，浏览器的标准就是这么设计的。相比于 DOM 对象，原生的 js 对象处理起来更快，而且更简单。

Vue 将它所有要监听的 DOM 映射为一个虚拟 DOM 树，这个树非常的轻量，它的职责就是描述当前页面的 DOM 状态。

当数据状态发生改变时，Vue 的响应系统会侦测到变化，并生成一个新的虚拟 DOM 树，通过与上一个虚拟 DOM 树进行比较，将改动应用至真实 DOM 状态。

不同于 React 的是，Vue 可以使用 HTML 模版，也可以是用 JSX，这是 Vue 在编译时将模版编译为渲染函数。

状态管理

状态管理本质上就是把整个应用抽象为下图中的循环，State 驱动 View 的渲染，而用户对 View 进行操作产生 Action，会使 State 产生变化，从而导致 View 重新渲染，这就是单向数据流。

在 Vue 中，一个组件就已经是这样的结构了，在多个组件共享状态时，或是来自不同视图的行为变更一个状态时，应该如何管理呢？此问题的答案就是 Vuex。

它将组件的共享状态抽离出来，放入 Store，组件通过调度（dispatch）使用 Action，Action 通过提交（commit）Mutation 修改 State，然后响应到组件。
实现原理

生命周期

Virtual DOM

Virtual DOM 在 Vue 中的实现。

响应式数据原理

在 Vue2，使用的是 ES5 的 Object.defineProperty 来构成数据监听系统，这也是 Vue2 不能兼容 IE8 及以下的原因。

在即将到来的 Vue3 中，会使用 Proxy 进行重构数据监听系统，这会导致 Vue3 不能兼容 IE11 及一下，Vue 团队会提出其他的办法来解决这个问题。

编译与渲染函数

在 Vue 中，会将模版编译为渲染函数，在 Vue3 中，也做出了相当的优化。

组件化

每一个组件就是一个 Vue 实例，组件内部是如何工作的，组件间的嵌套等实现。

v-model

Vue 提供了 v-model 的指令，用于实现表单与数据状态之间的双向绑定，这也没有破坏单向数据流，只是语法糖。
```
<input v-model="sth" />
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />
```
核心插件

Vue Router：客户端路由中存在的种种问题，嵌套路由、重定向/别名、懒加载等。

Vuex：初始化过程，如何管理全局状态等。