vue3生命周期的理解

生命周期有哪些

生命周期	描述
beforeCreate	组件实例被创建前
created	组件实例已经完全创建
beforeMount	组件挂载前
mounted	组件挂载在实例上去之后
beforeUpdate	组件数据发生变化，更新之前
updated	组件数据变化更新之后
beforeDestory	组件实例销毁之前
destoryed	组件实例完全销毁之后
activated	keep-alive缓存的组件激活时
deactivated	keep-alive缓存的组件激活后
errorCaptured	捕获一个来自子孙组件的错误时被调用

生命周期整体流程

beforeCreate -> created

• 初始化vue实例，进行数据监测

created

• 完成数据监测，属性与方法的运算，watch、event事件回调的配置
• 可调用methods中的方法，访问和修改data数据触发响应式渲染dom，可通过computed和watch完成数据计算
• 此时vm.$el 并没有被创建

created -> beforeMount

• 判断是否存在el选项，若不存在则停止编译，知道调用vm.$mount(el)才会继续编译
• 优先级：render > template > outerHtml
• vm.el 获取到的是挂载Dom的

beforeMount

• 可获取到vm.el
• vm.el虽已经完成DOM初始化，但并未挂载在el选项上

beforeMount -> mounted

• vm.el完成挂载，vm.$el生成的DOM替换了el选项所对应的DOM

mounted

• vm.el已完成DOM的挂载与渲染，刺客打印vm.$el，发信啊之前的挂载点及内容已被替换成新的DOM

beforeUpdate

• 更新的数据必须渲染在模板之上的（el、template、render之一)
• 此时view层还未更新
• 若在beforeUpdate 中再次修改数据，不会再次触发更新方法

updated

• 完成view层的更新
• 若在updated中再次修改数据，会再次出发更新方法（beforeUpdate、updated）

beforeDestory

• 实例被销毁前使用，此时实例属性与方法仍可访问

destoryed

• 完全销毁。清理它与其他实例之间的连接，解绑他的全部指令及事件监听器
• 并不能清除DOM，仅仅销毁实例
  

数据请求在created和mounted的区别

created实在组件实例一旦创建完成的时候立刻调用，这时候页面dom节点并未生成mounted 是在页面dom节点渲染完毕之后就立刻执行的出发时间上created是比mounted更要早的两者相同点：都能拿到实例对象的属性和方法讨论这个问题本质的就是触发的时间，放在mounted请求可能会导致页面闪动（页面dom结构已经生成）但如果在页面加载完成前则不会出现此情况。建议：放在create生命周期中