【vue生命周期函数理解】

1. 单组件生命周期函数执行顺序

*注： vue中所有的生命钩子 this 都自动绑定至该vue实例，所以在使用vue生命周期函数时不能以箭头函数的形式应用（ 箭头函数“无“this指向，其绑定了父级上下文，所以 this 不会指向预期的组件实例，使用时可能会出现undefined的错误）
错误示范：created: () => this.fetchTodos()，此时的this.fetchTodos()为undefined

// 初始化vue实例对象，vue的本质可看做一个类
let vm = new Vue({
	el: '#app' , // 挂载元素
	data: {},
})
// 创建之前 -- 不能获取 el && data
beforeCreate () {
	console.log('vue实例创建之前')
}
// 创建之后 -- 不能获取 el, 可获取data
created () {
	console.log('vue实例创建之后')
}
// 挂载之前 -- 可以获取 el 和 data, 此时的data为原始数据，即data中的数据还未被渲染
beforeMount () {
	console.log('vue实例挂载之前')
}
// 挂载之后 -- 可以获取 el 和 data，此时data中的数据已经全部加载
mounted () {
	console.log('vue实例挂载之后')
}
// 更新之前 -- 可以获取 el 和 data, 此时的data为原始数据，即新数据还未被渲染
beforeUpdate () {
	console.log('vue实例更新之前')
}
// 更新之后
updated () {
	console.log('vue实例更新之后')
}
// 销毁之前
beforeDestroy () {
	console.log('vue实例销毁之前')
}
// 销毁之后 -- 常见的销毁可以通过v-if指令去操作
destroyed() {
	console.log('vue实例销毁之后')
}

2. 父子组件嵌套时生命周期函数执行顺序

3. props、data、computed、watch、methods的执行顺序

3.1 加载时间
beforeCreate 和 created 之间
详见vue源码中的initState()
3.2 执行顺序
（1）props => methods => data => computed
（2）watch不会在创建阶段自动执行
（3）data 和 props 在created时可获取

4. 生命周期图示