详解Vue生命周期

叶落如梦星

已于 2023-07-14 01:18:10 修改

阅读量161

点赞数 1

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

于 2023-03-13 14:32:30 首次发布

本文链接：https://blog.csdn.net/yjxkq99/article/details/129493294

版权

JS 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

Vue

5 篇文章 0 订阅

订阅专栏

首先，Vue有哪些生命周期，这个是至少得掌握的。

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

详解每个生命周期的特点

beforeCreate：组件实例刚被创建，组件的数据观测和初始化 props 已经完成，但是 $el 属性还没有被创建，因此无法访问组件中的 DOM 或其他子组件。
created：组件实例已经创建，$el 属性已经被创建，但是 DOM 还没有被渲染出来。在这个阶段可以访问组件中的 props、data、methods 等属性。
beforeMount：在这个阶段，Vue 将组件挂载到 DOM 上之前执行，所以此时组件的 $el 属性已经被创建，但是还没有被添加到 DOM 上。在这个阶段可以访问到组件的 $el 属性。
在 beforeMount 钩子函数中，Vue 实例的 $el 属性已经指向了组件将要挂载的目标 DOM 元素，但是这个元素还没有真正添加到实际的 DOM 结构中。因此，通过访问 $el 可以获取到即将渲染的 DOM 元素，并且可以对元素进行操作，但是在此阶段如果依赖于其他已渲染的 DOM 元素，可能会得到空或不准确的结果。
mounted：组件已经被挂载到 DOM 上，此时可以访问组件中的 DOM 元素，也可以对 DOM 进行操作。在这个阶段也可以访问到组件的 $refs 属性。
beforeUpdate：在数据更新之前执行，在这个阶段可以对数据进行处理或者根据数据的变化进行操作。
updated：在数据更新之后执行，在这个阶段可以访问组件中更新后的数据和 DOM 元素，也可以进行 DOM 操作。但是需要注意的是，在这个阶段不要修改数据，否则会进入无限循环。
beforeDestroy：在组件销毁之前执行，在这个阶段可以进行一些清理工作，比如清除定时器、取消事件监听等。
destroyed：组件已经被销毁，所有的事件监听和子组件已经被移除。在这个阶段组件已经不能被使用。

注释：

$el是什么？

$el 是 Vue 实例的一个属性，它表示 Vue 实例所管理的 DOM 元素。当 Vue 实例挂载到 DOM 上之后， $el 就会引用这个挂载的 DOM 元素。

在 Vue 组件中，如果在 beforeMount 和 mounted 生命周期钩子函数中访问 $el 属性，就可以操作或访问组件挂载的 DOM 元素。例如，可以使用 jQuery 或原生 DOM API 对组件的 DOM 元素进行操作，或者在 mounted 生命周期钩子函数中调用第三方的 DOM 操作库。

需要注意的是，在组件的 beforeMount 钩子函数中，$el 属性的值是 undefined，因为此时组件的 DOM 元素还没有生成。在 mounted 钩子函数中，$el 属性的值才会被初始化为组件挂载的 DOM 元素。如果在组件实例化的过程中需要访问 $el 属性，可以在组件的 created 钩子函数中访问，此时 $el 属性的值也是 undefined。