1. vue生命周期钩子
vue实例从加载到销毁过程中会执行的一些回调函数
生命周期 : vue实例从创建到销毁的过程。 (vue实例创建, dom树完成渲染)
钩子 : 回调函数
2. vue生命周期4个阶段8个勾子
阶段一: 创建 (创建vue实例)
beforeCreate, created
阶段二: 挂载 (data数据渲染到el)
beforeMount,mounted
阶段三: 更新 (检测data变化并更新el)
beforeUpdate,updated
阶段四: 销毁 (解除data与el的绑定关系)
beforeDestroy,destroyed
钩子执行顺序
1. beforeCreate : 创建vue实例之前
data中的数据还没有创建
2.created : vue实例创建完成
完成data的创建,但是还没有创建挂载点 可以访问 data / methods / computed 等 不能访问真实DOM
3.beforeMount : data数据挂载到el之前
完成el的创建,但是没有挂载
4.mounted : 完成挂载
完成初始渲染(第一次把data渲染到el)可以访问真实DOM了
5.beforeUpdate : 数据更新前
检测数据变化了,但是页面还没有更新
6.updated : 完成数据更新
把修改后的data重新渲染到了页面 数据和真实DOM都更新了
7.beforeDestroy : vue实例销毁前
销毁前: 不是指vue实例销毁,而是解除data和el的绑定关系
8.已经销毁
3. vue第一次加载的时候会执行哪几个钩子
3.1 创建vue实例之前 : beforeCreate
3.2 创建vue实例之后 : created
3.3 挂载前 : beforeMount
3.4 挂载后(初始渲染) : mounted
4. vue常用钩子
created : 完成data数据创建 (一般用于axios请求网络数据)
mounted : 完成初始渲染 (一般用于操作dom)
5.注意点
vue生命周期钩子 不能使用 箭头函数
function函数: 钩子中的this指向 vue实例
箭头函数: 钩子中的this指向 window
刚学vue的小菜鸟,不对的地方欢迎大家纠正和补充(*^▽^*)