vue3生命周期

已于 2023-07-04 14:28:37 修改
阅读量4.8k 收藏 4
点赞数
CC 4.0 BY-SA版权
分类专栏： VUE 文章标签： vue.js
于 2023-03-02 14:25:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40340943/article/details/129299999
Vue3的生命周期包括初次加载、更新、卸载阶段的多个钩子函数，如beforeCreate、created、beforeMount等。在页面关闭时不一定会执行卸载钩子，可能需要借助window.onunload事件。对于响应式数据，只有应用到模板上的才会触发更新。基础数据类型的props变化总会触发更新，而对象则区分替换和属性修改的情况。同时，Vue3中生命周期可通过组合式API在setup中引入。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一，生命周期

初次加载：
1.setup 创建：组件创建前和创建后执行，包含了beforeCreate和created
2.beforeMount 挂载前：组件挂载前执行
3.mounted 挂载后：组件挂载后执行

更新：
1.beforeUpdated 更新前执行
2.updated 更新完成后执行

卸载：
1.beforeUnmount 卸载前执行
2.unmounted 卸载后执行

（当直接单击浏览器页签关闭页面时，页面的beforeUnmount，unmounted好像不执行，这时需要使用window.onunload事件来处理业务 以上为个人开发时发现，在网上没有找到资料支持）

异常：
1.errorCaptured 异常捕捉

keepalive专属
1.actived 组件激活时执行，第一加载也会执行
2.deactived 组件失活时执行，组件卸载时也会执行

二，选项式api

1.在vue3中，所有生命周期都可以在setup中以组合式api引入，使用是在前面加一个on

2.引入的生命周期是一个函数，传入一个函数代表执行函数

import { onMounted } from 'vue';

onMounted(()=>{
	console.log('component mounted')
})

二，注意事项

1.vue的响应式思想是，只有应用到模板上的响应式数据（除了props）发生了修改，才会触发更新生命周期，对于没有应用到模板上的响应式数据，即使发生修改，也不会触发更新周期。

2.对于组件的props，要分两种情况讨论

（1）当是基础数据时，只要发生改变，不管是否应用到组件上，都会执行更新生命周期

（2）当是对象时，又可分为两种情况

①替换整个对象（引用地址发生改变），会执行更新生命周期，
②更新对象的某个属性时，当属性被应用到模板上，会执行更新生命周期，没有被引用到模板上，不会执行更新生命周期。

【Vue3】组件生命周期
又言又语
07-30 1628
本文介绍 Vue 组件生命周期。创建挂载更新销毁阶段Vue3 Hooks 函数Vue2 Hooks 函数创建 - 创建前setup创建 - 创建完毕setupcreated挂载 - 挂载前挂载 - 挂载完毕onMountedmounted更新 - 更新前更新 - 更新完毕onUpdatedupdated销毁 - 销毁前销毁 - 销毁完毕destroyedVue3 创建阶段对应setup；Vue3 Hooks 函数名添加了on前缀；
Vue 3 生命周期函数详解
licy__的博客
12-08 4823
Vue 实例从创建到销毁经历了一系列的阶段，这些阶段被称为生命周期。在每个阶段，Vue 提供了相应的钩子函数（Lifecycle Hooks），允许开发者在特定的时间点执行自定义逻辑。| |v v| |v v| |v vVue 3 引入了 Composition API 和setup函数，使得组件逻辑更加模块化和可复用。此外，部分生命周期钩子名称有所变化，以更清晰地表达其含义。
vue3中的生命周期
Derlii的博客
07-21 962
DOM元素被销毁，此时对应 的Vue 实例所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。在实例初始化(new Vue())后执行，此时的数据监听和事件绑定机制都未完成，dom元素也没有渲染出来。当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步。这个时候数据发生了改变，并且视图页面也已经完成了更新，因此，该阶段看到的DOM元素的内容是最新内容。在这个阶段，实例已经被挂载完成了，也就是能获取到数据和DOM元素了。
Vue3 生命周期全面解析：从入门到精通
最新发布
QQ1257871322的博客
04-18 4611
组件生命周期指的是一个Vue组件从创建、挂载、更新到销毁的整个过程。在这个过程中，Vue提供了一系列的"钩子函数"(Hook)，允许开发者在特定阶段插入自己的代码。})})// 组件中使用setup() {Vue3的生命周期系统在保留Vue2核心概念的基础上，通过Composition API提供了更灵活的组织代码方式。理解并正确使用生命周期钩子对于开发高质量的Vue应用至关重要。关键点总结：Composition API的生命周期钩子以onX形式导入，在setup中使用。
Vue3生命周期
热门推荐
m0_57341617的博客
08-19 12万+
vue3生命周期钩子函数，vue3和vue2钩子的变化
vue3之生命周期
小李在努力学习
03-24 5191
生命周期
vue3的生命周期
qq_54049842的博客
03-17 3712
关于vue3的生命周期
【vue3系列】vue3之生命周期(带图)
qq_42445025的博客
12-16 6万+
Vue3之生命周期 主要Vue生命周期事件被分为两个钩子，分别在事件之前和之后调用，vue应用程序中有4个主要事件(8个钩子)： 创建 ---- 在组建创建时执行 挂载 ---- DOM被挂载时执行 更新 ---- 当响应数据被修改时执行 销毁 ---- 在元素被销毁之前立即执行 在【options API】中，生命周期钩子是被暴露在vue实例上的选项，我们只需要调用使用即可。 在【composition API】中，我们需要将生命周期钩子导入项目，然后才能使用。 import {onMounted
vue3生命周期--钩子函数图解（中文版）.svg
11-02
vue3生命周期--钩子函数图解（中文版）
Vue2 与 Vue3 生命周期对比
qq_40792800的博客
08-20 1525
1、配置式中存在。
vue3 生命周期钩子
咸鱼滚滚
08-24 1168
在 Vue 3 中，可以在组件不同阶段的生命周期执行特定逻辑。 生命周期整体分为四个阶段：创建、挂载、更新、卸载。
【Vue3 入门到实战】9. Vue3生命周期
qq_58195504的博客
02-07 1470
组件的生命周期是指组件从创建到销毁过程中经历的一系列阶段。每个阶段都有对应的钩子函数，允许你在特定的时间点执行代码。这些钩子函数可以帮助你更好地控制组件的行为，例如初始化数据、处理副作用、清理资源等。生命周期主要包含四个阶段，即创建、挂载、更新、销毁。beforeCreate:触发时机： 在实例初始化之后，数据观测和事件配置之前。用途：此时还不能访问data、methods 或者 DOM 元素。created:触发时机：在实例创建完成后被调用。此时已完成数据观测和事件配置，但尚未挂载到 DOM。用途：可以在
学习vue3系列生命周期
前端精髓
08-08 3万+
之前已经介绍了 vue3 的相关知识点：ref，reactive，computed，watch，watchEffect，toRef，toRefs 这些响应式的API，相信大家对 vue3 已经有一定的理解了。 生命周期 除了这些函数 vue3 还增加了些生命周期，可以直接导入 onXXX 一族的函数来注册生命周期钩子：与 2.x 版本生命周期相对应的组合式 API。 1、beforeCreate -> 使用 setup() 2、created -> 使用 setup() 3、beforeMou.
Vue3 生命周期
siweisibiansitui的博客
03-17 1676
在 Vue 实例化阶段最早调用，数据未初始化，无法访问datacomputed等。created：在实例创建完成后调用，可以访问data和computed，但 DOM 尚未挂载。如果你需要进行初始化操作（例如获取数据或配置事件等），可以使用这些钩子中的一个或多个。：在组件挂载到 DOM 之前调用，模板已经编译完成，但实际 DOM 还未渲染，可以用来做一些准备工作，但不能进行 DOM 操作。mounted。
说说你对Vue生命周期的理解?
海阔天空
04-17 449
说说你对Vue生命周期的理解? 生命周期（Life Cycle）的概念应用很广泛，特别是在政治、经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程在Vue中实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线，每个工人（生命周期）站在各自的岗位，当任务流转到工人身边的时候，工人就开始工作PS：在Vue生命周期钩子会自动绑定 th
vue3 onMounted onBeforeUnmount
03-04
### Vue3 中 `onMounted` 和 `onBeforeUnmount` 生命周期钩子的用法 在 Vue 3 组合式 API (Composition API) 中，组件生命周期可以通过组合式的函数来访问。这使得开发者可以更灵活地管理逻辑关注点分离。 #### 使用 `onMounted` 当希望某些操作仅在组件挂载完成后执行时，可利用 `onMounted` 钩子。此钩子会在实例被挂载之后立即调用，在这个阶段模板已经被解析并应用到 DOM 上[^1]。 ```javascript import { defineComponent, onMounted } from 'vue' export default defineComponent({ name: 'MyComponent', setup() { onMounted(() => { console.log('The component has been mounted.') // 可在此处发起网络请求获取数据或初始化第三方库等 fetch('/api/data') .then(response => response.json()) .then(data => { console.log('Fetched data:', data); }); }) return {} } }) ``` #### 使用 `onBeforeUnmount` 对于那些需要清理工作的情况，比如取消定时器、移除事件监听器或其他资源释放的任务，则可以在卸载前通过 `onBeforeUnmount` 来完成这些处理。它将在组件即将销毁之前触发。 ```javascript import { ref, onMounted, onBeforeUnmount } from 'vue' export default { setup() { let timerId; onMounted(() => { timerId = setInterval(() => { console.log('Timer tick'); }, 1000); window.addEventListener('resize', handleResize); }); function handleResize(event) { console.log(`Window resized to ${event.target.innerWidth}x${event.target.innerHeight}`); } onBeforeUnmount(() => { clearInterval(timerId); // 清理计时器 window.removeEventListener('resize', handleResize); // 移除窗口大小改变监听器 }); return {}; }, } ``` 这两个钩子提供了一种方式让开发人员能够更好地控制何时以及如何响应应用程序中的不同状态变化，从而编写更加高效的应用程序代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值