04 Vue生命周期钩子
一、生命周期图
1、官网原图
2、我理解的图
二、生命周期
| 钩子函数 | 解释 |
|---|---|
| beforeCreate | 创建Vue实例之前调用 |
| created | 创建Vue实例成功后调用（可以在此处发送异步请求后端数据） |
| beforeMount | 渲染DOM之前调用 |
| mounted | 渲染DOM之后调用 |
| beforeUpdate | 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染） |
| updated | 重新渲染完成之后调用 |
| beforeDestroy | 销毁之前调用 |
| destroyed | 销毁之后调用 |
create
let vm = new Vue()
mount
挂载，把div挂载到组件中
update
let vm = new Vue({
el: '#box',
data: {
isShow: true // 修改这个内容
},
methods: {
handleClick() {
console.log('我是根组件')
}
}
})
1.bedoreCreate
2.created
3.beforeMount
4.mounted（用得最多）
这时候可以向后端发送数据了
5.beforeUpdate
6.updated
7.beforeDestroy
8.destroyed
组件销毁 - 给组件写一个定时器
setTimeout() // 延迟3s干什么事
setInterval() // 延迟3s干什么事
测试代码
生命周期