1.首先看vue2的生命周期图,图采自官方文档
总的分为4个阶段,创建--挂载--更新--销毁
beforeCreate------data 和 methods 中的数据还没有初始化,访问不到this
created------初始化完毕,可以访问到this,最快在这里发起axios请求
beforeMount------模板渲染,相关的 render 函数首次被调用,模板已经在内存中编译好了,但是尚未挂载到页面中去
mounted------挂载完毕,el可用,dom挂载完毕,可以操作dom
beforeUpdate------组件数据更新之前调用, 此时页面中显示的数据还是旧的,但 data 是最新的,页面尚未和最新的数据保持同步
updated------组件数据更新之后,页面和 data 数据已经保持同步,都是最新的,(ps:数据更新了,但是页面显示还是旧的,可以使用$nextTick解决)
beforeDestroy------可以在销毁定时器,
destroyed------组件已经销毁,
2.vue3有两种生命周期选项式和组合式api,两者的区别就是组合式api需要写在setup里面,而且需要input引入,选项式api则是和setup同级,并且无需引入。
总结:vue2和vue3的生命周期的区别
vue3的生命钩子去掉了beforeCreate和created这两个钩子,用setup代替了这两个钩子,
并且setup里面访问不到this,vue3选项式api把销毁阶段的钩子改成了beforeUnmount和
unmounted,组合式api则是在前面加了一个on,并且需要import引入才可以使用。