【转】Vue.js 2.0 快速上手精华梳理

Vue.js 2.0 快速上手精华梳理

Sandy

发掘代码技巧：公众号:daimajiqiao

自从Vue2.0发布后，Vue就成了前端领域的热门话题，github也突破了三万的star，那么对于新手来说，如何高效快速的学习Vue2.0呢。

Vue基础

对于没有接触过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

Vue-router

和之前一样，推荐直接用html+js过一遍文档
对路由导航钩子得好好看一看。
看完文档就可以上手vue-cli，一般新手在这几天都会死活跑不出来。偷笑
最直接的方法就是去github上搜一些关于vue-router2.0的demo，看如何构件路由，如何构件项目目录。
我这里有一个传送门
如果能跑出来，就可以做一些小项目了，比如写一个知乎日报啊偷笑，这些demo在github上很多。
可以结合一些组件库写demo，这样可以更加了解组件化。比如饿了么团队的Element、mint-ui

Vuex

什么是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快速入门（三）

需要视频教程的关注公众号[代码技巧]（ID:daimajiqiao）回复 14 即可获取,付出总会有收获

Vue.js2.0核心思想

Vue.js是一个提供MVVM数据双向绑定的库，专注于UI层面，核心思想是：数据驱动、组件系统。

数据驱动：

Vue.js数据观测原理在技术实现上，利用的是ES5Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制。核心是VM，即ViewModel，保证数据和视图的一致性。

watcher：每一个指令都会有一个对应的用来观测数据的对象，叫做watcher，比如v-text="msg", {{ msg }}，即为两个watcher，watcher对象中包含了待渲染的关联DOM元素。

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

基于依赖收集的观测机制原理：

1 将原生的数据改造成 “可观察对象”，通常为，调用defineProperty改变data对象中数据为存储器属性。一个可观察对象可以被取值getter，也可以被赋值setter。
2 在解析模板，也就是在watcher的求值过程中，每一个被取值的可观察对象都会将当前的watcher注册为自己的一个订阅者，并成为当前watcher的一个依赖。
3 当一个被依赖的可观察对象被赋值时，它会通知notify所有订阅自己的watcher重新求值，并触发相应的更新，即watcher对象中关联的DOM改变渲染。
依赖收集的优点在于可以精确、主动地追踪数据的变化，不需要手动触发或对作用域中所有watcher都求值（angular脏检查实现方式的缺点）。特殊的是，对于数组，需要通过包裹数组的可变方法（比如push）来监听数组的变化。在添加/删除属性，或是修改数组特定位置元素时，也需要调用特定的函数，如obj.$add(key, value)才能触发更新。这是受ES5的语言特性所限。

组件系统：

应用类UI可以看作全部是由组件树构成的。

注册一个组件：

Vue.component('my-component', {
    // 模板
    template: '<div>{{msg}} {{privateMsg}}</div>',
    // 接受参数
    props: {
        msg: String
    },
    // 私有数据，需要在函数中返回以避免多个实例共享一个对象
    data: function () {
        return {
            privateMsg: 'component!'
        }
    }
})
<my-component msg="hello"></my-component>

组件的核心选项

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机制，让用户可以在多个组件中复用共同的特性。

Node与Angular与Vue.js视频教程需要视频教程的关注公众号[代码技巧]（ID:daimajiqiao）回复 14 即可获取,付出总会有收获

最后建议Vue 2.0 的学习顺序

起步

1. 扎实的 JavaScript / HTML / CSS 基本功。这是前置条件。
2. 通读官方教程 (guide) 的基础篇。不要用任何构建工具，就只用最简单的 script，把教程里的例子模仿一遍，理解用法。不推荐上来就直接用 vue-cli 构建项目，尤其是如果没有 Node/Webpack 基础。
3. 照着官网上的示例，自己想一些类似的例子，模仿着实现来练手，加深理解。
4. 阅读官方教程进阶篇的前半部分，到『自定义指令 (Custom Directive) 』为止。着重理解 Vue 的响应式机制和组件生命周期。『渲染函数（Render Function)』如果理解吃力可以先跳过。
5. 阅读教程里关于路由和状态管理的章节，然后根据需要学习 vue-router 和 vuex。同样的，先不要管构建工具，以跟着文档里的例子理解用法为主。
6. 走完基础文档后，如果你对于基于 Node 的前端工程化不熟悉，就需要补课了。下面这些严格来说并不是 Vue 本身的内容，也不涵盖所有的前端工程化知识，但对于大型的 Vue 工程是前置条件，也是合格的『前端工程师』应当具备的知识。

前端生态/工程化

1. 了解 JavaScript 背后的规范，ECMAScript 的历史和目前的规范制定方式。学习 ES2015/16 的新特性，理解 ES2015 modules，适当关注还未成为标准的提案。
2. 学习命令行的使用。建议用 Mac。
3. 学习 Node.js 基础。建议使用 nvm 这样的工具来管理机器上的 Node 版本，并且将 npm 的 registry 注册表配置为淘宝的镜像源。至少要了解 npm 的常用命令，npm scripts 如何使用，语义化版本号规则，CommonJS 模块规范（了解它和 ES2015 Modules 的异同），Node 包的解析规则，以及 Node 的常用 API。应当做到可以自己写一些基本的命令行程序。注意最新版本的 Node (6+) 已经支持绝大部分 ES2015 的特性，可以借此巩固 ES2015。
4. 了解如何使用 / 配置 Babel 来将 ES2015 编译到 ES5 用于浏览器环境。
5. 学习 Webpack。Webpack 是一个极其强大同时也复杂的工具，作为起步，理解它的『一切皆模块』的思想，并基本了解其常用配置选项和 loader 的概念/使用方法即可，比如如何搭配 Webpack 使用 Babel。学习 Webpack 的一个挑战在于其本身文档的混乱，建议多搜索搜索，应该还是有质量不错的第三方教程的。英文好的建议阅读 Webpack 2.0 的文档，比起 1.0 有极大的改善，但需要注意和 1.0 的不兼容之处。

Vue 进阶

1. 有了 Node 和 Webpack 的基础，可以通过 vue-cli 来搭建基于 Webpack ，并且支持单文件组件的项目了。建议用 webpack-simple 这个模板开始，并阅读官方教程进阶篇剩余的内容以及 vue-loader 的文档，了解一些进阶配置。有兴趣的可以自己亲手从零开始搭一个项目加深理解。
2. 根据 例子 尝试在 Webpack 模板基础上整合 vue-router 和 vuex
3. 深入理解 Virtual DOM 和『渲染函数 (Render Functions)』这一章节（可选择性使用 JSX)，理解模板和渲染函数之间的对应关系，了解其使用方法和适用场景。
4. （可选）根据需求，了解服务端渲染的使用（需要配合 Node 服务器开发的知识）。其实更重要的是理解它所解决的问题并搞清楚你是否需要它。
5. 阅读开源的 Vue 应用、组件、插件源码，自己尝试编写开源的 Vue 组件、插件。