Vue组件初始化流程

Vue组件初始化过程，主要包括以下几个部分：

1. 初始化Vue实例：通过new Vue，初始化根组件实例，内部调用_init (opens new window)方法，做一些options合并 (opens new window)及数据初始化initState (opens new window)的工作。
2. 组件挂载（mountComponent）：内部会先通过_render方法生成vnode，并通过_update方法更新vnode。最终调用patch方法渲染到页面上。而在patch内部会递归调用createElm方法，生成真实dom并插入到相应的父节点位置。
   1. 在执行createElm(vnode) (opens new window)的过程中
      1. 如果是组件vnode，则会进入子组件的初始化 (opens new window)过程：new 子组件实例 (opens new window)，并调用_init (opens new window)方法，做一些组件options合并 (opens new window)，initState (opens new window)等操作。完成后，调用child.$mount (opens new window)去挂载子组件，即又进入第2步。
      2. 如果是普通vnode，则直接创建dom元素并插入父节点即可。
   2. 子组件挂载完成。
3. 根组件挂载完成。

通过上述的流程图，我们就能知道，为什么组件的声明周期是先父后子，等所有子组件挂载完成后，父组件再挂载。

// parent.vue
--beforeCreate -> create ->  beforeMount
		// child.vue
		--beforeCreate -> create ->  beforeMount -> mounted
--> mounted(父组件)

为了方便大家理解这个过程，建议先看下如何调试Vue源码 (opens new window)，再通过一个实际的案例来断点调试整个执行过程。可以参考这个demo (opens new window)（demo里使用了带sourcemap的vue文件）。

至于组件更新的原理，则可以参考响应式原理这篇文章。