当前位置：首页 > news >正文

VUE 页面生命周期基本知识点

news 来源：原创 2024/9/28 17:56:06

在 Vue.js 中，页面生命周期（更准确地说是组件生命周期）指的是组件从创建到销毁的一系列过程。了解这些生命周期钩子可以帮助我们更好地管理组件的状态和行为。以下是 Vue 组件的主要生命周期钩子：

beforeCreate
- 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
- 此时组件的选项对象还未被创建，el 和 data 都不存在。
created
- 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，以及 watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
- 在这个阶段，可以访问组件的 data 和 computed 属性，以及调用 methods 方法，但 DOM 还未挂载，因此无法访问 $el 或 vm.$el。
beforeMount
- 在挂载开始之前被调用：相关的 render 函数首次被调用。
- 在这个阶段，虚拟 DOM 已经创建，但还未挂载到真实 DOM，可以访问 this.$el（它是一个空的虚拟节点），但内容尚未渲染到页面上。
mounted
- el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个在内联模板中渲染的元素，当 mounted 被调用时 vm.$el 也在文档内。
- 此时组件已经渲染到页面上，可以访问 DOM，执行依赖于 DOM 的操作。
beforeUpdate
- 数据更新时调用，发生在虚拟 DOM 打补丁之前。
- 在这个阶段，data 中的数据是最新的，但虚拟 DOM 还未更新，所以页面还未渲染最新的数据。
updated
- 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
- 在这个阶段，虚拟 DOM 已经更新，并且页面也已经渲染最新的数据。但要注意避免在这个钩子中执行过多的操作，因为它可能会引发额外的渲染。
beforeDestroy
- 实例销毁之前调用。在这一步，实例仍然完全可用。
- 在这个阶段，组件实例仍然有效，但即将被销毁。你可以在这个钩子中执行一些清理操作，如清除定时器、解绑全局事件、销毁插件对象等。
destroyed
- Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也都会被销毁。
- 此时组件已被完全销毁，无法再访问组件实例或 DOM 元素。

需要注意的是，在 Vue 3 中，新增了一个 setup 钩子，它是 beforeCreate 和 created 之间的生命周期钩子，用于在组件创建之前设置响应式状态和执行副作用（例如，设置侦听器或计算属性）。但是，由于 setup 是在 beforeCreate 和 created 钩子之前调用的，因此在 setup 中无法访问 this。同时，Vue 3 也提供了 Composition API，它提供了一种更灵活的方式来组织和重用逻辑代码。