Vue3中的beforeUnmount生命周期函数

原创 已于 2023-05-12 00:05:56 修改 · 864 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue.js

于 2023-04-28 18:03:15 首次发布
在Vue2中，用于在组件销毁前执行操作的是beforeDestroy钩子。然而，在Vue3中，这个生命周期钩子被替换为了beforeUnmount。对于埋点统计，特别是跟踪用户浏览文章时长，现在需要在beforeUnmount中处理日志上报逻辑，确保在组件卸载时记录访客行为。

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

今天在自己的博客文章中进行埋点，统计访客浏览文章时长，在访客离开页面进行日志上报。vue2中是在beforedestory钩子函数中进行的，但查询vue3的文档确没有发现这个函数，而是改成了beforeUnmount。

//todo贴代码

 

 

 

 

crimson71
关注
【vue3】6 vue3.0-5 生命周期
jieweiwujie的博客
10-07 472
从'vue'中引入的生命周期函数,这些生命周期钩子注册函数只能在setup()期间同步使用 因为它们依赖于内部的全局状态来定位当前组件实例(正在调用setup()的组件实例), 不在当前组件下调用这些函数会抛出一个错误。 即可以从其他文件引入使用了生命周期的函数等,放在setup中执行 和外部的生命周期函数相比,会优先指向setUp内的生命周期函数,再去执行外部的生命周期函数 修改两个生命周期函数 onBeforeUnmount 对应beforeDestroy 在卸载组件实例之.
Vue3 - 生命周期钩子函数（组合式 API）
资深程序员
11-13 4311
Vue3.0生命周期钩子函数官方文档，Vue3组合式 API之生命周期钩子，Vue3:组合式 API:生命周期钩子(在setup阶段被同步调用)，Vue3 组合式 API | 菜鸟教程，Vue3-组合式API学习之生命周期钩子函数，Vue3中组合式API中的生命周期钩子，Vue3.x 组合式api的生命周期钩子，Vue3——Hook函数 & 生命周期，Vue 3.0笔记——组合式API(介绍)，Vue3 - 生命周期钩子函数（组合式 API）
前端必知必会-Vue ‘beforeUnmount‘ 生命周期钩子
qq_24018193的博客
02-21 791
本文介绍了Vue ‘beforeUnmount’ 生命周期钩子的使用，如有问题欢迎私信和评论。
页面刷新会调用 unmounted吗
最新发布
lrh122800的博客
05-13 240
这是因为页面刷新会导致当前的 Vue 实例和组件被彻底销毁，并且重新创建一个新的实例和组件。因此，在页面刷新时，之前的实例和组件已经不存在了，它们也就无法再执行任何生命周期钩子函数。但是，如果你在浏览器中进行页面刷新，Vue 实例和组件将会被完全销毁并重建。这意味着在页面刷新时，两个生命周期钩子函数。需要注意的是，如果你希望在页面刷新时做一些清理工作，可以监听。事件，在事件处理函数中执行相应的逻辑。在 Vue 中，当一个组件被卸载时，会触发。方法销毁组件时，这两个钩子函数都会被调用。钩子函数都不会被调用。
vue基础 - 24 （vue3 生命周期：onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted）
热门推荐
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-05 4万+
setup相当于之前的created周期：创建时 onBeforeMount：DOM即将挂载 onMounted：DOM挂载完毕 onBeforeUpdate：DOM即将更新 onUpdated：DOM更新完毕 onBeforeUnmount：即将销毁 onUnmounted：销毁完毕 <script lang="ts"> import { defineComponen...
vue3项目返回第三方页面onBeforeUnmount和onBeforeRouteLeave失效问题
mewmew1的博客
06-22 1万+
vue3项目埋点需求，需记录页面浏览时长，入口在第三方页面，从vue3页面返回到入口页时，onBeforeUnmount、onBeforeRouteLeave全部失效不执行，在vue3项目里组件之间跳转没问题。经测试，popstate事件监听pc端及移动端都失效；js的beforeUnload事件在pc端谷歌浏览器上返回第三方页面有效，vue项目内组件跳转无效，ios手机上全部无效。 解决方法： 监听js的pagehide事件，在pc端及移动端都有效，返回第三方页面和vue项目内跳转、vue项目里点击按钮跳
vue3 基本使用
m0_52775179的博客
03-20 1533
vue3
Vue 3 生命周期函数详解
licy__的博客
12-08 4846
Vue 实例从创建到销毁经历了一系列的阶段，这些阶段被称为生命周期。在每个阶段，Vue 提供了相应的钩子函数（Lifecycle Hooks），允许开发者在特定的时间点执行自定义逻辑。| |v v| |v v| |v vVue 3 引入了 Composition API 和setup函数，使得组件逻辑更加模块化和可复用。此外，部分生命周期钩子名称有所变化，以更清晰地表达其含义。
Vue3 -- 生命周期函数（钩子）
Sun_blog
07-06 1289
文章目录Vue生命周期Vue生命周期的作用生命周期函数（钩子）Vue生命周期图示Vue各生命周期函数的描述代码演示页面效果总结 Vue生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载DOM、更新渲染、卸载等一系列的过程，我们称这是 Vue 的生命周期。 Vue生命周期的作用 Vue 所有功能实现都是围绕生命周期进行； 在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染； 生命周期函数（钩子） 生命周期函数是指在某一时刻自动执行的函数。 Vue生命周期图示 从图中可以看出，V
vue2与vue3生命周期函数详细对比
XSL_HR的博客
09-24 2890
vue2和vue3在生命周期钩子上的对比的详细说明 强烈推荐！！
Vue2&vue3的生命周期函数11个+监听属性+计算属性+vue内置的基本指令
IAmNotChangAn的博客
12-27 1441
Vue的生命周期函数
笔记：Vue 3.0
我才是真的李成贤的博客
03-09 1455
笔记：Vue 3.0
钩子函数是什么意思_聊聊 beforeUnmount/unMounted 生命周期钩子函数
weixin_39550940的博客
12-12 8807
Hello，各位小伙伴，接下来的一段时间里，我会把我的课程《Vue.js 3.0 核心源码解析》中问题的答案陆续在我的公众号发布，由于课程的问题大多数都是开放性的问题，所以我的答案也不一定是标准的，仅供你参考喔。本期的问题：如果你想在路由组件切换的时候，取消组件正在发送的异步 Ajax 请求，那你应该在哪个生命周期写这个逻辑呢？这个问题回答起来其实很简单，因为在路由组件切换的时候，被切换...
vue3小笔记
A081127的博客
05-03 4049
一.创建vue3确保vuee-cli是4.5版本以上 二.vue3在main.js中的引入与vue2不同 import {createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') 三.sutpu是一个函数，把变量，方法，以前的勾子函数都放里面 async在没在使用Suspense组件时是不能出现在sustpu中的 template下可以不用加div根标签 vue3的方法变量都写到set
前端的成长-学习Vue3-生命周期【第五弹】
Scorpio_bai的博客
11-02 118
注意： 在vue3中可以使用vue2中的生命周期回调函数，只不过vue2中的生命周期使用方法是Options（配置选项），在vue3当中使用的是组合Api。如果您认真阅读至此，您现在已经掌握了基本的知识啦 ，为接下来我们学习Vue3更加有信心！注意：使用vue3中的生命周期api比vue2中的生命周期执行快。
vue3 第三幕之【生命周期函数】(挂载篇+更新篇+卸载篇)
XSL_HR的博客
09-22 5690
关于vue3生命周期挂载 更新 卸载过程的详细分析总结
vue3知识点整理
qq_37004501的博客
06-27 561
【代码】vue3知识点整理。
Vue3 学习
a9874561328的博客
03-25 1751
1 创建vue3项目(首先要确保@vue/cli版本在4.5.0以上) vue --version ## 检查版本 vue install -g @vue/cli ## 全局安装vue脚手架 vue create vue_test (项目名) ## 创建项目 2 相较于vue2的变化 不再引入Vue构造函数，而是引入一个叫做createApp的工厂函数 template中不再需要根标签 3 SetUp setup的执行时机：在beforeCreate之前...
vue3生命周期
qq_44540152的博客
11-29 8230
对比下面两张生命周期可以看出，vue3使用beforeUnmount和unmounted替代了beforeDestroy和destroyed。vue3在初始化的时候已经挂载到容器，无需在beforeMount判断是否有根节点项配置。 vue3生命周期： 对比vue2生命周期 代码验证生命周期： vue3生命周期有两种配置方式： 第一种：通过配置使用生命周期钩子函数，在setup()外面配置 第二种：在组合式api中使用生命周期钩子函数，其中beforeCreate()、 created()相当于setu
vue3中的生命周期函数有哪些
06-11
Vue 3 中的生命周期函数与 Vue 2 类似，但有些名称和用法有所改变。下面是 Vue 3 中常用的生命周期函数： - `beforeCreate`：在实例初始化之后、数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 -...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值