5. vue的生命周期

vue2和vue3的生命周期是有区别的

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy Destoryed

vue3将beforeDestroy和Destroyed替换为beforeUnmount和unmounted

options API和Composition API在生命周期上也有差别:

Composition API提供了setup函数作为入口函数，替换了beforeCreate和created这两个生命周期钩子。所以实际开发中，可以简单把setup理解为created进行使用。

大致流程（Vue2）

挂载流程

• 初始化事件及生命周期
• 触发beforeCreate
• 实例创建完成、组件、属性等初始化完成，触发created
• vue开始解析模板，生成虚拟DOM，页面还不能显示解析好的内容
• 触发beforeMount
• 将内存中的虚拟DOM转换为真实DOM
• 触发mounted

更新流程

• 数据更新，视图还未更新时，触发beforeUpdate
• 根据新数据，生成新的虚拟DOM，随后与旧的DOM进行Diff比较。最终完成真实DOM的更新
• 触发updated

销毁流程

• 销毁组件时，触发beforeDestroy
• 销毁所有方法等，触发destroyed

数据请求在created和mounted的区别

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