vue.js的生命周期

最新推荐文章于 2024-07-23 21:45:00 发布

小白话

最新推荐文章于 2024-07-23 21:45:00 发布

阅读量1.7k

点赞数 45

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_42087317/article/details/137347409

版权

17 篇文章 0 订阅

订阅专栏

本文详细比较了Vue.js2和3的生命周期钩子，包括beforeCreate、created、beforeMount等，强调它们在实例化过程中的作用，以及在数据初始化、挂载、更新和销毁阶段的自定义逻辑应用。

摘要由CSDN通过智能技术生成

Vue.js 中的生命周期钩子是在实例化过程中会自动调用的函数，它们允许你在特定阶段执行自定义逻辑。在 Vue.js 2 和 Vue.js 3 中，生命周期钩子有一些差异，但整体结构是相似的。以下是 Vue.js 2 和 Vue.js 3 中常见的生命周期钩子：

beforeCreate: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created: 实例创建完成后被调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
beforeUpdate: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。
beforeDestroy: 实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed: 实例销毁后调用。该钩子被调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

beforeCreate: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created: 实例创建完成后被调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。
onBeforeMount (Vue 3.2+): 在挂载开始之前被调用，等效于 Vue.js 2.x 中的 beforeMount。
mounted: onMounted 在挂载之后被调用，等效于 Vue.js 2.x 中的 mounted。
beforeUpdate: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
onBeforeUpdate (Vue 3.2+): 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前，等效于 Vue.js 2.x 中的 beforeUpdate。
updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。
onUpdated (Vue 3.2+): 由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用，等效于 Vue.js 2.x 中的 updated。
beforeUnmount: 在卸载开始之前被调用。
onBeforeUnmount (Vue 3.2+): 在卸载开始之前被调用，等效于 Vue.js 2.x 中的 beforeDestroy。
unmounted: onUnmounted 在卸载之后被调用，等效于 Vue.js 2.x 中的 destroyed。