Vue.js 2.0 快速上手精华梳理
Posted 优才网
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js 2.0 快速上手精华梳理相关的知识，希望对你有一定的参考价值。
自从Vue2.0发布后，Vue就成了前端领域的热门话题，github也突破了三万的star，那么对于新手来说，如何高效快速的学习Vue2.0呢。
对于没有接触过es6和webpack的童鞋来说，不建议直接用官方的脚手架vue-cli构件项目。
先按文档顺序最少学习完组件那一章。直接在html文件中引入vue.js开始学习，了解vue的基础指令，和整个vue实例的基础架构。
vue的生命周期很重要，了解这点以后可以免去很多问题。
学完这些可以做一些练手的小项目，比如万年不变的todolist……
现在可以开始学习使用vue-cli构件项目了，学习组件化之前，推荐先看一下es6关于模块的介绍。阮一峰《ECMAScript6》 Module。
光会这些还是不够的，还得会一些npm基础，知道如何用git-bush来安装模块依赖，会一些常用的命令。这方面的知识可以参阅npm入门文档。
看完这些就可以试着将之前写的demo用搭建的vue-cli来实现。附上我写的一个入门小demovue-demo-search。
多看看组件那里，看看如何在vue-cli中怎么实现组件化。
到这里vue基础篇就结束了。你还可以有条件的参阅剩下的官方文档里面的进阶篇，如果时间有限，就直接进入vue-router
和之前一样，推荐直接用html+js过一遍文档。
对路由导航钩子得好好看一看。
看完文档就可以上手vue-cli，一般新手在这几天都会死活跑不出来。偷笑。
最直接的方法就是去github上搜一些关于vue-router2.0的demo，看如何构件路由，如何构件项目目录。
我这里有一个传送门。
如果能跑出来，就可以做一些小项目了，比如写一个知乎日报啊。偷笑，这些demo在github上很多。
可以结合一些组件库写demo，这样可以更加了解组件化。比如饿了么团队的Element、mint-ui。
什么是vuex？
Vuex 是一个专门为 Vue.js 应用设计的 状态管理模型 + 库。它为应用内的所有组件提供集中式存储服务，其中的规则确保状态只能按预期方式变更。说白了就是控制应用的一些全局状态。状态改变了，对应的视图也会改变。
在学习Vuex时，会有一些ES6特性，当遇到这些时，最好不要一带而过，去好好看一看这些es6特性。
比如在学习Action时可以看看ES6新增的Promise和参数解构。
实践的方法一样是先看别人写的代码，比如官方的购物车实例的应用结构。
把之前写的demo优化一下，有些地方可以用用vuex。
vuex主要是用来对不同组件间进行通信，它构建了一个Vue实例的全局数据与方法，这些数据与方法可以在该Vue实例的所有组件中get与set。
vue基础
Vue2.0最全文档
Vue2.0 探索之路——vue-router入门教程和总结
Vue.js 2.0 快速上手
Vuejs2.0 文档攻略
“Vue2.0”跟俺一起全面入坑 01
“Vue2.0”跟俺一起全面入坑 02
“Vue2.0”跟俺一起全面入坑 03
“Vue2.0”跟俺一起全面入坑 —— 自定义便签
超好用的VueJs调试工具——vue-devtools
Vue2.0史上最全入坑教程（上）—— 搭建Vue脚手架（vue-cli）
Vue2.0史上最全入坑教程（中）—— 脚手架代码详解
Vue2.0史上最全入坑教程（下）—— 实战案例
Vue2.0史上最全入坑教程（完）—— 实战案例
vue-cli中配置sass和利用SASS函数功能实现px转rem
vue提高
Vue路由跳转问题记录详解
vuejs心法和技法
Vue2.0生命周期和钩子函数的一些理解 ===》推荐
用webpack（2.x语法）手动搭建Vue项目
全面解析vue-cli生成的项目中使用其他库（js库、css库）
Vuex从入门到熟练使用
vue与服务端通信—vue-resource
vue开发过程中跨域最简单解决方案
富文本编辑器Ueditor如何在Vue中使用？
vue 1.x和vue 2.x的区别
到了Vue2.x有哪些变化？—— 知识点
到了Vue2.x有哪些变化？—— 组件通信
其他必备知识点
ES6入门（一）
ES6快速入门（二）
ES6快速入门（三）
Vue.js是一个提供MVVM数据双向绑定的库，专注于UI层面，核心思想是：数据驱动、组件系统。
数据驱动
Vue.js数据观测原理在技术实现上，利用的是ES5Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制。核心是VM，即ViewModel，保证数据和视图的一致性。
watcher：每一个指令都会有一个对应的用来观测数据的对象，叫做watcher，比如v-text="msg", {{ msg }}，即为两个watcher，watcher对象中包含了待渲染的关联DOM元素。
基于依赖收集的观测机制原理
1 将原生的数据改造成 “可观察对象”，通常为，调用defineProperty改变data对象中数据为存储器属性。一个可观察对象可以被取值getter，也可以被赋值setter。
2 在解析模板，也就是在watcher的求值过程中，每一个被取值的可观察对象都会将当前的watcher注册为自己的一个订阅者，并成为当前watcher的一个依赖。
3 当一个被依赖的可观察对象被赋值时，它会通知notify所有订阅自己的watcher重新求值，并触发相应的更新，即watcher对象中关联的DOM改变渲染。
依赖收集的优点在于可以精确、主动地追踪数据的变化，不需要手动触发或对作用域中所有watcher都求值（angular脏检查实现方式的缺点）。特殊的是，对于数组，需要通过包裹数组的可变方法（比如push）来监听数组的变化。在添加/删除属性，或是修改数组特定位置元素时，也需要调用特定的函数，如obj.$add(key, value)才能触发更新。这是受ES5的语言特性所限。
组件系统
应用类UI可以看作全部是由组件树构成的。
注册一个组件：
组件的核心选项
1 模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。
2 初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。
3 接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。
4 方法（methods）：对数据的改动操作一般都在组件的方法内进行。
5 生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，最新2.0版本对于生命周期函数名称改动很大。
6 私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。
Webpack是一个开源的前端模块构建工具，它提供了强大的loader API来定义对不同文件格式的预处理逻辑，这是.vue后缀单文件组件形式的基础。所以在此基础上，尤大开发的vue-loader允许将模板、样式、逻辑三要素整合在同一个文件中，以.vue文件后缀形成单文件组件格式，方便项目架构和开发引用。
其他特性
1 异步批量DOM更新：当大量数据变动时，所有受到影响的watcher会被推送到一个队列中，并且每个watcher只会推进队列一次。这个队列会在进程的下一个 tick异步执行。这个机制可以避免同一个数据多次变动产生的多余DOM操作，也可以保证所有的DOM写操作在一起执行，避免DOM读写切换可能导致的layout。
2 动画系统：Vue.js提供了简单却强大的动画系统，当一个元素的可见性变化时，用户不仅可以很简单地定义对应的CSS Transition或Animation效果，还可以利用丰富的javascript钩子函数进行更底层的动画处理。
3 可扩展性：除了自定义指令、过滤器和组件，Vue.js还提供了灵活的mixin机制，让用户可以在多个组件中复用共同的特性。
起步
扎实的 JavaScript / HTML / CSS 基本功。这是前置条件。
通读官方教程 (guide) 的基础篇。不要用任何构建工具，就只用最简单的 script，把教程里的例子模仿一遍，理解用法。不推荐上来就直接用 vue-cli 构建项目，尤其是如果没有 Node/Webpack 基础。
照着官网上的示例，自己想一些类似的例子，模仿着实现来练手，加深理解。
阅读官方教程进阶篇的前半部分，到『自定义指令 (Custom Directive) 』为止。着重理解 Vue 的响应式机制和组件生命周期。『渲染函数（Render Function)』如果理解吃力可以先跳过。
阅读教程里关于路由和状态管理的章节，然后根据需要学习 vue-router 和 vuex。同样的，先不要管构建工具，以跟着文档里的例子理解用法为主。
走完基础文档后，如果你对于基于 Node 的前端工程化不熟悉，就需要补课了。下面这些严格来说并不是 Vue 本身的内容，也不涵盖所有的前端工程化知识，但对于大型的 Vue 工程是前置条件，也是合格的『前端工程师』应当具备的知识。
前端生态/工程化
了解 JavaScript 背后的规范，ECMAScript 的历史和目前的规范制定方式。学习 ES2015/16 的新特性，理解 ES2015 modules，适当关注还未成为标准的提案。
学习命令行的使用。建议用 Mac。
学习 Node.js 基础。建议使用 nvm 这样的工具来管理机器上的 Node 版本，并且将 npm 的 registry 注册表配置为淘宝的镜像源。至少要了解 npm 的常用命令，npm scripts 如何使用，语义化版本号规则，CommonJS 模块规范（了解它和 ES2015 Modules 的异同），Node 包的解析规则，以及 Node 的常用 API。应当做到可以自己写一些基本的命令行程序。注意最新版本的 Node (6+) 已经支持绝大部分 ES2015 的特性，可以借此巩固 ES2015。
了解如何使用 / 配置 Babel 来将 ES2015 编译到 ES5 用于浏览器环境。
学习 Webpack。Webpack 是一个极其强大同时也复杂的工具，作为起步，理解它的『一切皆模块』的思想，并基本了解其常用配置选项和 loader 的概念/使用方法即可，比如如何搭配 Webpack 使用 Babel。学习 Webpack 的一个挑战在于其本身文档的混乱，建议多搜索搜索，应该还是有质量不错的第三方教程的。英文好的建议阅读 Webpack 2.0 的文档，比起 1.0 有极大的改善，但需要注意和 1.0 的不兼容之处。
Vue 进阶
有了 Node 和 Webpack 的基础，可以通过 vue-cli 来搭建基于 Webpack ，并且支持单文件组件的项目了。建议用 webpack-simple 这个模板开始，并阅读官方教程进阶篇剩余的内容以及 vue-loader 的文档，了解一些进阶配置。有兴趣的可以自己亲手从零开始搭一个项目加深理解。
根据 例子 尝试在 Webpack 模板基础上整合 vue-router 和 vuex
深入理解 Virtual DOM 和『渲染函数 (Render Functions)』这一章节（可选择性使用 JSX)，理解模板和渲染函数之间的对应关系，了解其使用方法和适用场景。
（可选）根据需求，了解服务端渲染的使用（需要配合 Node 服务器开发的知识）。其实更重要的是理解它所解决的问题并搞清楚你是否需要它。
阅读开源的 Vue 应用、组件、插件源码，自己尝试编写开源的 Vue 组件、插件。
往期精彩回顾
如您有任何问题，请联系优才小编：
15201480058
以上是关于Vue.js 2.0 快速上手精华梳理的主要内容，如果未能解决你的问题，请参考以下文章