vue八种钩子函数

组件生命周期钩子函数

• 一个组件从创建到销毁会经历一系列的特殊过程，把执行过程叫做组件的生命周期
  每个生命周期都会执行特殊的函数，把这些函数称为生命钩子函数
• vue生命周期4组8个常用 创建前后，挂载前后︰更新前后，销毁前后

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', '销毁前');
		clearInterval(this.interID)
	},
	destroyed() {
		console.log('Destroy', '销毁完成');
	}

常用的钩子函数

• created 创建完成 可以获取this ajax加载 开启定时器
• mounted 挂载完成（内容以及渲染完毕） 可以获取dom节点
• beforeDestroy 销毁前 清除定时器 移除监听事件

vue父子组件生命周期执行顺序

• 加载渲染过程：父beforeCreate —> 父created —> 父beforeMount —> 子beforeCreate —> 子created —> 子beforeMount —> 子mounted —> 父mounted
• 子组件更新过程：父beforeUpdate —> 子beforeUpdate —> 子updated —> 父updated
• 父组件更新过程：父beforeUpdate —> 父updated
• 销毁过程：父beforeDestroy —> 子beforeDestroy —> 子destroyed —> 父destroyed