Vue2生命周期（钩子函数）相关

目录

钩子函数有哪些，分别可以做哪些操作

单组件声明周期

父子组件生命周期

---

钩子函数有哪些，分别可以做哪些操作

生命周期（钩子函数）	此时的行为	在此阶段可以做什么事情
beforeCreate	dom和data都为undefined，还未初始化	加loading事件
created	data有了，还没有dom	结束loading，请求数据，为mounted渲染做准备
beforeMount	dom和data都初始化了，但还是虚拟的dom节点，具体的data还没有替换
mounted	dom挂载完成	配合路由钩子使用
beforeUpdate	data更新时触发
updated	data更新时触发	数据更新时做一些处理，也可以用watch监听
beforeDestroy	组件销毁时触发
destroyed	组件销毁时触发，接触了事件监听和dom的绑定，但dom节点依旧存在（无响应了）	组件销毁时的操作

单组件声明周期

挂载： beforeCreate => created => beforeMount => mounted

更新： beforeUpdate => updated

销毁： beforeDestroy => destroyed

父子组件生命周期

挂载： parent beforeCreate => parent created => parent beforeMount => child beforeCreate => child created => child beforeMount => child mounted => parent mounted

（简记：父创建——父挂载前——子创建——子挂载完——父挂载）

更新： parent beforeUpdate => child beforeUpdate => child updated => parent updated

（简记：父更新前——子更新——子更新完——父更新）

销毁： parent beforeDestroy => child beforeDestroy => child destroyed => parent destroyed

（简记：父销毁前——子销毁——子销毁完——父销毁）【和更新一样】

从以上能够看出：

挂载时，子组件是在父组件before mount后开始挂载，并且子组件先mounted，父组件随后。

更新时，子组件是在父组件before update后开始更新，子组件先于父组件更新。

销毁时，子组件是在父组件before destroy后开始销毁，并且是子组件先销毁，父组件随后。