学习vue源码（16）初探生命周期之各阶段都在干嘛

一、概述

每个Vue.js实例在创建时都要经过一系列初始化，例如设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。

同时，也会运行一些叫作生命周期钩子的函数，给在不同阶段添加自定义代码的机会。

二、生命周期

Vue.js生命周期可以分为4个阶段：初始化阶段、模板编译阶段、挂载阶段、卸载阶段。

初始化阶段

new Vue（）到created之间的阶段叫作初始化阶段。

这个阶段的主要目的是在Vue.js实例上初始化一些属性、事件以及响应式数据，如props、methods、data、computed、watch、provide和inject等。

模板编译阶段

在created钩子函数与beforeMount钩子函数之间的阶段是模板编译阶段。

这个阶段的主要目的是将模板编译为渲染函数，只存在于完整版中。如果在只包含运行时的构建版本中执行new Vue（），则不会存在这个阶段。

当使用vue-loader或vueify时，*.vue文件内部的模板会在构建时预编译成Javascript，所以最终打好的包里是不需要编译器的，用运行时版本即可。由于模板这时已经预编译成了渲染函数，所以在生命周期中并不存在模板编译阶段，初始化阶段的下一个生命周期直接是挂载阶段。

挂载阶段

beforeMount钩子函数到mounted钩子函数之间的是挂载阶段。

在这个阶段，Vue.js会将其实例挂载到DOM元素上，通俗地讲，就是讲模板渲染到指定的DOM元素中。

在挂载的过程中，Vue.js会开启Watcher来持续追踪依赖的变化。

在已挂载状态下，Vue.js仍会持续追踪状态的变化。当数据（状态）发生变化时，Watcher会通知虚拟DOM重新渲染视图，并且会在渲染视图前出发beforeUpdate钩子函数，渲染完毕后触发updated钩子函数。

通常，在运行时的大部分时间下，Vue.js处于已挂载状态，每当状态发生变化时，Vue.js都会通知组件使用虚拟DOM重新渲染，也就是常说的响应式。这个状态会持续到组件被销毁。

卸载阶段

应用调用vm.$destroy方法后，Vue.js的生命周期会进入卸载阶段。

**vm.$destroy**我们在上一篇文章中实现过：学习vue源码（15）手写$forceUpdate,vm.$destroy方法

在这个阶段，Vue.js会将自身从父组件中删除，取消实例上所有依赖的追踪并且移除所有的事件监听器。

小结

生命周期可以在整体上分为两部分

1、第一部分是初始化阶段、模板编译阶段与挂载阶段。

2、第二部分是卸载阶段。

三、从源码角度了解生命周期

卸载阶段的内部原理就是vm.$destroy方法的内部原理。模板编译阶段和挂载阶段（mount）的原理已述过，见前面文章。现在主要介绍初始化阶段的内部原理。

new Vue()被调用时发生了什么

当new Vue()被调用时，会首先进行一些初始化操作，然后进入模板编译阶段，最后进入挂载阶段。

function Vue(optipons){
   
	if(process.env.NODE_ENV !== 'production'&&
		!(this instanceof Vue)
	){
   
		warn('Vue is a constructor and should be called with the 'new' keyword')
	}
	this._init(options);
}
export default Vue;

1、首先进行安全检查。在非生产环境下，如果没有使用new调用Vue，则会在控制台抛出错误警告：Vue是构造函数，应该使用new关键字来调用。

2、然后调用this._init(options)来执行生命周期的初始化流程。即生命周期的初始化流程在this._init中实现。

四、_init方法的定义

（1）Vue.js通过调用initMixin方法将_init挂载到Vue构造函数的原型上。

import {
    initMinxin }  from './init'
function Vue(optipons){
   
	if(process.env.NODE_ENV !== 'production'&&
		!(this instanceof Vue)
	){