vue-music 音乐 App 之 cube-ui 重构

背景 去年 6 月初，我在慕课网上线了一门 Vue.js 2.0 的高级实战课程音乐 WebApp 课程，教同学们如何去开发基础组件和业务组件。在一般大公司的实际项目中，并不会为每一个项目都去开发基础组件，他们往往会把基础组件收敛成一个组件库，供各个项目复用。滴滴也是如此，我们在去年初使用 Vue.js 去重构了我们的打车 WebApp，也抽象出了一套移动端组件库，在经过一年多的业务考验后，我们决定做开源，一方面是想把好的东西分享出去，并通过社区的反馈去完善我们的组件库；另一方面也是

Vue.js 升级踩坑小记

本文并不是什么高深的技术文章，只是记录我最近遇到一个因为 Vue 升级导致我的一个项目踩坑以及我解决问题的过程。文章虽长但不水，写下来的目的是想和大家分享一下我遇到问题时候一个思考的方法和态度。 背景：去年我在慕课网推出了一门 Vue.js 的入门实战课程——Vue.js 高仿饿了么外卖 App ，这门课程收到了非常不错的反响，于是今年又在慕课网上继续推出了 Vue.js 的高级进阶实战课程——Vue.js 音乐 App，同样反馈不错。每天晚上下班回家，我会去问答区看一下学生们的问题，

当 better-scroll 遇见 Vue

在我们日常的移动端项目开发中，处理滚动列表是再常见不过的需求了，以滴滴为例，可以是这样竖向滚动的列表，如图所示： 也可以是横向滚动的导航栏，如图所示： 可以打开“微信 —> 钱包—>滴滴出行”体验效果。 我们在实现这类滚动功能的时候，会用到我写的第三方库，better-scroll。 什么是 better-scroll better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做

Vuex 2.0 源码分析（中）

大家好，我叫黄轶，来自滴滴公共前端团队，最近在幕课网上线了一门 Vue.js 的实战课程——《Vue.js高仿饿了么外卖App 2016最火前端框架》，同时，我们团队最近写了一本书 ——《Vue.js 权威指南》，内容丰富，由浅入深。不过有一些同学反馈说缺少 Vuex 的介绍的章节。既然 Vue.js 2.0 已经正式发布了，我们也要紧跟步伐，和大家聊一聊 Vuex 2.0。本文并不打算讲官网已有的内容，而会通过源码分析的方式，让同学们从另外一个角度认识和理解 Vuex 2.0。 wrapGetters 了解完 regis

Vuex 2.0 源码分析（上）

大家好，我叫黄轶，来自滴滴公共前端团队，最近在幕课网上线了一门 Vue.js 的实战课程——《Vue.js高仿饿了么外卖App 2016最火前端框架》，同时，我们团队最近写了一本书 ——《Vue.js 权威指南》，内容丰富，由浅入深。不过有一些同学反馈说缺少 Vuex 的介绍的章节。既然 Vue.js 2.0 已经正式发布了，我们也要紧跟步伐，和大家聊一聊 Vuex 2.0。本文并不打算讲官网已有的内容，而会通过源码分析的方式，让同学们从另外一个角度认识和理解 Vuex 2.0。 当我们用 Vue.js 开发一个

Vue 源码解析：深入响应式原理（中）

Directive Vue 指令类型很多，限于篇幅，我们不会把所有指令的解析过程都介绍一遍，这里结合前面的例子只介绍 v-text 指令的解析过程，其他指令的解析过程也大同小异。 前面我们提到了 Vue 实例创建的生命周期，在给 data 添加 Observer 之后，有一个过程是调用 vm.compile 方法对模板进行编译。compile 方法的源码定义如下： <!-源码目录：src/instance/internal/lifecycle.js--> Vue.prototype._compile = function (el) { var options = this.$options // transclu

Vue 源码解析：深入响应式原理（上）

本文来自《Vue.js 权威指南》源码篇中我写的一个章节，现在分享出来给大家，顺便安利一波我的github，欢迎 star 和 follow~ Vue.js 最显著的功能就是响应式系统，它是一个典型的 MVVM 框架，模型（Model）只是普通的 JavaScript 对象，修改它则视图（View）会自动更新。这种设计让状态管理变得非常简单而直观，不过理解它的原理也很重要，可以避免一些常见问题。下面让我们深挖 Vue.js 响应式系统的细节，来看一看 Vue.js 是如何把模型和视图建立起关联关系的。 如何追踪变化 我