先放上官方文档的链接
就我自己来说的话,总结一句话就是vue从创建到销毁的过程,会执行的回调函数.
再详细说一下vue钩子的类别
vue的生命周期钩子分为4个阶段,8个方法.
1.初始阶段:
beforeCreate() {
/*vue实例创建了,但是el(挂载点)和data(数据)还没有创建 (准备创建data)
底层原理(初始化vue实例,初始化钩子函数,初始化一些事件和侦听器配置项)*/
},
created() {
/*data数据创建了,但是el(挂载点)还没有创建 (准备创建el)
底层原理:初始化data中的数据和methods中的方法*/
//应用:常用于页面发生ajax请求.
}
2.挂载阶段:
beforeMount() {
/*el挂载点创建了,但是data数据还没有渲染(准备渲染中)
底层:创建el挂载点,并且生成虚拟DOM*/
},
mounted() {
/*data数据 第一次 渲染完毕 (完成初始渲染)
底层:将虚拟dom渲染成真实DOM*/
}
3.更新阶段:
beforeUpdate() {
/*检测到data数据变化,但是还没有开始重新渲染 (data变了,准备重新渲染中) `会执行多次*/
},
updated() {
/*变化后的data数据 ,完成渲染到页面 (完成重新渲染)`会执行多次*/
//应用:最早可以操作页面dom元素的钩子
}
4.销毁阶段
beforeDestroy() {
/*vue实例销毁即将销毁(解除data与el的关联),之后修改data,页面不会被渲染
底层 : 解除 事件绑定、侦听器、组件8`destroyed() {}`vue实例已经销毁*/
// 应用:如页面有setInterval定时器,则移除
},
destroyed() {
/*vue实例已经销毁*/
}
上面就是钩子的4个阶段,与8个方法的简单的介绍了.
再借用官方的一句话
所有生命周期钩子的 this 上下文将自动绑定至实例中,因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。因为箭头函数绑定了父级上下文,所以 this 不会指向预期的组件实例,并且this.fetchTodos 将会是 undefined。
所以生命周期钩子不能使用箭头函数.
再把官方的流程图发出来看一下