上篇文章中，我们主要讲了initLiftcycle方法，它的作用是初始化vm实例中和生命周期相关的属性。今天为大家介绍另一个方法——initEvents。从这个方法的名称来看，我们知道它是和事件相关的方法，具体怎么相关，我们先来看源码。

上篇文章，我们讲了vm._renderProxy相关的内容。主要是通过Proxy为我们vm属性添加一些自定义的行为。今天我们回到init方法中，为大家讲解initLifecycle。initLifeCycle方法用来初始化一些生命周期相关的属性，以及为parent,child等属性赋值，来看源码。

前几篇文章中，我们主要讲了merge options的一些操作。今天我们回到init方法往下讲。 {代码...} 上面的代码逻辑很简单，主要就是为Vue实例的_renderProxy属性赋值。不同的代码运行环境赋值的结果不同。 当前环境是开发环境，则调用initProxy方法 如果不是开发环境，则vue实例的_renderProxy属性指向vue实例本身。 initPr...

上篇文章，我们讲到了mergeOptions的部分实现，今天接着前面的部分讲解，来看代码，如果大家觉得看讲解枯燥可以直接翻到本文的最后看mergeOptions的整个流程图。

前几篇文章中我们讲到了resolveConstructorOptions，它的主要功能是解析当前实例构造函数上的options，不太明白的同学们可以看本系列的前几篇文章。在解析完其构造函数上的options之后，需要把构造函数上的options和实例化时传入的options进行合并操作并生成一个新的options。这个合并操作就是今天要讲的mergeOptions。...

上一篇文章中说道，resolveConstructorOptions函数要分两种情况进行说明，第一种是Ctor为基础构造器的情况，这个已经向大家介绍过了，今天这篇文章主要介绍第二种情况，Ctor是Vue.extend创建的"子类"。

mergeOptions方法，我们之后的博文再来做详细介绍。今天主要研究resolveConstructorOptions方法,从字面意思来看，这个方法是来解析constructor上的options属性的。我们来看源码。

上篇博文中说到了Vue源码的目录结构是什么样的，每个目录的作用我们应该也有所了解。我们知道core/instance目录主要是用来实例化Vue对象，所以我们在这个目录下面去寻找Vue构造函数。果然我们找到了Vue的构造函数定义。

前段时间在读Vue源码的时候，发现了这样一个API——Window.Performance。当时完全不知道这是什么？在查阅了一些资料后，大致明白了这个API的作用。下面一起来看看什么是Performance。其实光看这个API的名字，我们就能大致猜到这一定是和性能相关的。来看看MDN上关于它的介绍。

上图就是关于Vue源码整体目录结构的介绍了，我们熟悉每个模块具体的功能之后，对我们之后继续研究源码是很有帮助的。下次谈论的主题是Vue的构造函数，当new Vue实例的时候，会发生什么呢？生成的Vue实例又有哪些属性和方法呢？我们下篇文章会进行详细的说明。人人都能懂的Vue源码系列文章将会详细的介绍Vue源码的方方面...

对于大型web app来说，如果把所有的文件都打包到一个文件中是非常低效的，特别是当一些代码块只在某些特定的条件下被调用。webpack可以让你的代码库分割成不同的块(chucks),仅仅在需要的时候再加载。其他的一些打包工具叫它们图层（layers), 卷(rollups) 或者 片段（fragments),这些特性被叫做代码分离（code splitting)...

大家觉得这段代码的输出结果是多少呢？很多小伙伴会觉得结果一定是这样的[{name: 'Chris xiong'}, {name: 'Chris xiong'}, {name: 'Chris xiong'}]这么想的同学请把上面那段代码放进控制台里输出一下。你会发现，结果不是你想象的那样。上述这段代码的执行结果是(3) [undefined × 3]。大家一定会感到困惑，为什么输出的...

在写任何一门语言的时候，它们都有好的代码实践和不好的代码实践。这两种代码可能都能编译运行。但是不好的代码可能会在开发，调试和修改中引起一些问题。在工作团队中，无论你的程序运行状况如何，某些人总要阅读并且修改你代码的某些地方。他们可能会添加一些新属性，修改一些bug,或者只是想明白它们是如何工作的。同...

我们知道，变量对于程序来说是至关重要的，如果没有变量存储和访问值，整个程序会受到限制。那么问题来了，既然程序这么需要变量，那么它到底是怎么样去存储变量和使用变量的呢？存储变量这里暂且不提，到时候会有专门一篇博客来说明这个问题。我们这次说的主要就是如何去使用变量。这就要牵扯到我们今天的主题作用域上...

代码在运行过程中，会有一个叫做调用栈(call stack)的概念。调用栈是一种栈结构,它用来存储计算机程序执行时候其活跃子程序的信息。（比如什么函数正在执行，什么函数正在被这个函数调用等等信息）。调用栈是解析器的一种机制。call stack

最近在开发的一个项目中，有使用番茄钟的需求，另外本人一直是一个番茄工作法的簇拥，所以就决定写一个基于vue 2.x开发的番茄钟组件。灵感来自于另一个组件vue-radial-progress。

前段时间在看一些前端模块化方面的知识，现在自己就来写一个符合amd／cmd 和commonjs标准的模块。在文中会穿插一些AMD／CMD，commonjs的基础知识，主要是为了让自己复习一下。了解的同学们可以直接略过。

我们在日常的开发中，经常使用诸如webpack,requireJS,seaJS 等前端资源模块化管理工具，这些工具让我们在开发的过程中，基于"模块"进行代码的编写。那么到底什么是模块化呢？模块化: 完成一个特定功能或者包含完成某项任务所包含的所有内容的一种组织形式。维基百科，实际上可以理解为模块化就是一组能够实现某项功能的...

npm脚本在我们日常工作中用到的还是非常多的，如果大家用webpack作为打包工具的话，相信npm run dev/bulid 之类的命令大家一定都使用的非常多了。那么为什么只需要输入npm run dev就能开启一个虚拟服务器？为什么run build就能构建项目呢？相信有很多同学会和我一样存在着些许疑问。下面我们就来看一看npm run dev/bulid...

flex布局是一种较新CSS盒子模型，在flex布局模型中，弹性容器的子元素的排布可以比较灵活，可以根据容器的大小自动扩展或收缩其大小。也可以比较灵活的处于容器的的某一位置上。所以flex的应用场景很多，比如我们碰到需要元素居中的应用场景时，flex布局就变得很有用了。更多关于flex的说明请看这里。

随着sass/less等css预处理器的出现，编写css变的越来越有乐趣。所以现在越来越多的人在项目中喜欢使用scss或者less。（我自己就是一个）。由于最近在写一个vue项目。所以就把写项目期间每天的一些知识点写在博客里。所以最近的博客应该都会和vue有关。今天要和大家分享的就是如何在vue项目中引入scss（引入less也类似）

Promise函数是es6中一个比较有用的特性，一般用来处理异步操作。让你的代码中不再只有回调函数套回调函数。promise函数的运行流程如下图：

昨天在开发项目的时候，有一个验证邮箱的需求，本来想着自己写一个正则表达式来验证的，但是写的时候却发现很多关于正则的知识都忘的差不多了。有些东西想记住真的就要重复练习，看明白了没有用，要天天练习才行。于是在参考了众多资料之后，选定了一个mdn上关于邮箱的正则来使用（mdn上的最初版本有个小bug，多了一个空...

最近在做一些小的练手代码的时候，碰到了一个很常见的问题，当在搜索框中进行搜索的时候，如果快速输入很多字符的话，搜索框的监听回调函数会执行很多次，如果回调业务较复杂的话，可能会导致页面运行缓慢甚至是奔溃，那么我们如何解决这个问题呢，让输入框在不在输入的情况下执行回调，或者每间隔一段时间执行一次回调...

最近在项目开发的时候，发现了自己对css布局方面的一些不足之处，特别是适配不同分辨率方面，几乎是没有经验的。在查阅了相关资料之后发现，响应式布局是目前解决不同分辨率显示问题的最好解决方案。达到一次设计，普遍使用的功能。本文主要以一个小项目为例，来说明这个概念。响应式Web设计

我们知道，诸如font-size,color等一些属性是可以通过继承父元素得到的。那么，为什么当我们想让a标签去继承父元素的颜色时，结果却常常不能如我们所愿呢？要想弄明白这个问题，首先我们要去了解一个概念-层叠样式表的层叠关系

昨天打开atom进行编码的时候，突然发现左侧目录树不能滚动了。很懵逼，不就是放假几天没怎么用它嘛？难道就闹脾气了。折腾了一小会儿，发现滚动条失灵的原因是安装的Atom Material主题出现了问题。（应该是该主题的一个bug，为什么突然出现，不知道是不是因为自己开了自动更新什么的） 解决方法有两个：（1）当然是更换...

在学习ES6新的特性解构赋值之前，我们先来看看为什么要使用解构，以前如果我们需要获取对象或者数组里面的数据，并且把它们存入数组，需要写很多代码。如下

在日常开发的时候，我们常常需要用到这几个高度信息。浏览器的视口高度和宽度，浏览器的卷动高度，正文内容的总高度等等信息，我在下图中列出了在工作中最常用的几个宽度和高度信息。并在本篇文章中对各种常见宽高进行说明。

let能代替var嘛？这是我在使用let一段时间后发出的疑问？也是我写这篇文章的原因。下面我们就以这个问题为基础，探讨一下let 和 var 之间的区别和联系。