一、生命周期
我们从源码开始进行分析整个Vue初始化执行顺序。（以下省略其他内容代码）
// vue/src/core/instance/index.js
Vue.prototype._init = function (options?: Object) {
...
// expose real self
vm._self = vm
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
...
}从源码可看出，new Vue()初始化时，会先初始化vm.$options，生命周期Lifecycle（初始化vm实例中和生命周期相关的属性）、Events事件，然后初始化initRender(vm)。 开始beforeCreate生命周期，开始初始化injections & reactivity （初始化注入和校验）。
初始化属性props、方法methods、状态data、计算属性computed、侦听器watch（注意：data中能获取到methods的原因是因为methods比data更早定义）。
- initLifecycle(vm)
主要作用是建立父子关系和初始化某些实例属性。找到父组件实例赋值给vm.$parent，把当前vm实例push到定位的第一个非抽象parent的$children属性上
- initEvents(vm)
主要作用是将父组件使用v-on或@注册的自定义事件添加到子组件的私有属性vm._events中
- initRender(vm)
主要作用是初始化用来将render函数转为vnode的两个方法vm._c 和vm.$createElement。用户自定义的render函数的参数h就是vm.$createElement方法，它可以返回vnode。
总结Vue其生命周期主要分三个阶段，创建阶段、更新阶段、销毁阶段。创建阶段和销毁阶段在生命周期中只会执行一次。
创建阶段
beforeCreate之后主要进行数据观测、属性、侦听器配置等。
更新阶段
更新阶段是一个被多次执行的阶段。当依赖的数据发生改变或被$forceUpdate 强制执行时，就会触发beforeUpdate，beforeUpdate就会做一些移除已经添加的事件监听器等工作。beforeUpdate之后开始执行render, render会生成新的虚拟DOM，再之后就开始挂载真实DOM，完成后就会调update。
注意：不能在beforeUpdate和updated 周期内修改依赖的数据，以避免造成死循环。
销毁阶段
打印生命周期
export default {
data () {
console.log('data')
return {
show: true
}
},
beforeCreate() {
console.log("beforeCreate")
},
created() {
console.log("created")
},
beforeMount() {
console.log("beforeMount")
},
mounted() {
console.log("mounted")
},
beforeUpdate() {
console.log("beforeUpdate")
},
updated() {
console.log("updated")
},
beforeDestroy()
console.log("beforeDestroy")
},
destroyed() {
console.log("destroyed")
},
methods: {
renderConsole () {
console.log('render')
return 'render'
}
}
}打印结果：
初始化时：
更新时：
销毁时：
初始化流程：
规格化 $options ，也就是用户自定义的数据
initLifecycle 注入生命周期
initEvents 初始化事件，注意：这里的事件是值在父组件在子组件上定义的事件
initRender 将render函数转为vnode的两个方法vm._c 和vm.$createElement
beforeCreate 开始beforeCreate生命周期
initInjections 通过 resolveInject 方法获取 inject 选项搜索结果，如果有搜索结果，遍历搜索结果并为其中的数据添加 setter 和 getter
initState 初始化属性props、方法methods、状态data、计算属性computed、侦听器watch（顺序）
initProvided 初始化 provide
created 开始created生命周期, 组件实例创建完成，属性已经绑定，但是DOM还没有生成，$el属性还不存在
beforeMounte 开始beforeMounte生命周期, 创建虚拟DOM
mounted 创建真实DOM并挂载，$el属性存在
公众号：高级web前端进阶
