1、Vue2和Vue3生命周期对比
Vue2 | Vue3 | ||||
创建 | beforeCreate | created | setup() | setup() | 创建 |
挂载 | beforeMount | mounted | onBeforeMount | onMounted | 挂载 |
更新 | beforeUpdate | updated | onBeforeUpdate | onUpdated | 更新 |
销毁 | beforeDestory | destroyed | onBeforeUnmount | onUnmounted | 卸载 |
激活 | activated | deactivated | onActivated | onDeactivated | 激活 |
捕获错误 | errorCaptured | onErrorCaptured | 捕获错误 |
2、Vue2生命周期的使用
(1)、beforeCreate:执行该函数时Vue实例仅仅完成自身事件绑定和生命周期函数的初始化工作,Vue实例中还没有Data,el,methods相关属性。
(2)、created:Vue实例已经初始化data属性和methods中相关方法,可在此阶段调取后端数据,相比于beforeMount()和mounted(),created()能更快获取到后端数据,减少页面loading时间。
(3)、beforeMount:进行模板编译,生成虚拟DOM
(4)、mounted:将数据渲染到页面上,生成真实DOM,可以启动定时器、绑定自定义事件、订阅消息等初始化操作。
(5)、beforeUpdate:数据更新时触发该函数,该函数执行时Vue实例中data数据变化,但页面数据仍为旧数据,即data数据与页面数据不同步
(6)、updated:数据更新触发,但时机点位于beforeUpdated后,此时页面数据与Vue实例中data数据能够保持一致。
(7)、beforeDestroy:Vue实例中所有数据、methods、component还未销毁,可进行清楚定时器、解绑自定义事件、取消消息订阅等
(8)、destroyed:Vue实例彻底销毁
(9)、activated:组件缓存被激活,被 keep-alive 缓存的组件激活时调用 使用组件缓存并激活时使用
(10)、deactivated:组件缓存被停用,被 keep-alive 缓存的组件停用时调用
(11)、errorCaptured:子组件发生错误时,当捕获一个来自子孙组件的错误时被调 用。此钩子会收到三个参数:错误对象、 发生错误的组件实例以及一个包含错误 来源信息的字符串。
3、Vue3生命周期的使用
(1)、setup:在组件实例初始化之前调用。在 setup 中可以进行响应式变量的声明和初始化工作。
(2)、onBeforeMount:在挂载之前调用。
(3)、onMounted:在挂载之后调用。可以进行一些需要使用 DOM 的操作,比如初始化某些插件、发送网络请求等。
(4)、onBeforeUpdate:在更新之前调用。在这里可以进行一些在数据变化之前需要执行的逻辑。
(5)、onUpdated:在更新之后调用。通常用于执行一些需要在更新之后立即执行的操作。
(6)、onBeforeUnmount:在卸载之前调用。通常用于清理一些定时器、取消订阅等操作。
(7)、onUnmounted:在卸载之后调用。可以执行一些清理工作,比如释放资源等。
(8)、onActivated: 被包含在 <keep-alive> 中的组件,会多出两个生命周期钩子函数,被激活时执行;
(9)、onDeactivated: 比如从 A 组件,切换到 B 组件,A 组件消失时执行;
(10)、onErrorCaptured: 当捕获一个来自子孙组件的异常时激活钩子函数。
PS:使用<keep-alive>
组件会将数据保留在内存中,比如我们不想每次看到一个页面都重新加载数据,就可以使用<keep-alive>
组件解决。
如果本文对你有帮助,不妨帮帮楼主点个赞吧~