vue3学习笔记（6）生命周期

已于 2022-04-24 23:15:03 修改
阅读量681 收藏
点赞数
分类专栏： vue3 文章标签： vue 前端框架
于 2022-04-24 16:46:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gtd54789/article/details/124386048
版权

Vue3专栏入口

文章目录

一、 常用的生命周期钩子

# 我们最常用的，在创建组件前执行
setup()
# 组件开始挂载前执行
onBeforeMount()
# 组件挂载完执行
onMounted()
# 组件更新前执行
onBeforeUpdate()
# 组件更新后执行
onUpdated()
# 组件卸载前执行
onBeforeUnmount()
# 组件卸载后执行
onUnmounted()
# 当A组件切换成B组件时 A组件消失后执行
onDeactivated
# 异常时执行
onErrorCaptured()

二、案例地址

2.1 onMounted 和 onBeforeUnmount

实现收集用户鼠标点击位置的hook函数案例中使用

2.2 onMounted

ref获取页面元素案例中使用

天天天天天天天天d
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于vue3生命周期的使用、了解以及用途（详细版）
老余的博客
02-22 1万+
每一个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。最常用的是created、mounted、updated和unmounted。可以监听某一类型的改变而执行某项操作。跟vue2并没有太多不同之处Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。
vue3+ts (源码+笔记+生命周期截图)
02-14
7. ** 生命周期钩子的改变**：Vue3 中生命周期钩子发生了变化，如 `beforeCreate` 和 `created` 合并为 `onBeforeMount`，`beforeDestroy` 和 `destroyed` 合并为 `onBeforeUnmount` 等。此外，还新增了一些生命周期...
vue3 的学习笔记
zyf13671493506的博客
11-20 358
环境配置和创建vue3项目 1.node版本要10以上 2.npm install -g @vue/cli 3.vue --version 查看版本号4.5.0以上 4.vue create vue3bases 5.第三项 6.第一个（choose Vue version），第二个(Babel)，第三个(TypeScript),倒数第三个（Unit Testing） 7.n,,,,,n 全是默认+n 1.在vscode中安装eslint 如果eslint不生效，在项目的更目录新建一个.vscode的文.
vue基础 - 24 （vue3 生命周期：onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted）
热门推荐
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-05 3万+
setup相当于之前的created周期：创建时 onBeforeMount：DOM即将挂载 onMounted：DOM挂载完毕 onBeforeUpdate：DOM即将更新 onUpdated：DOM更新完毕 onBeforeUnmount：即将销毁 onUnmounted：销毁完毕 <script lang="ts"> import { defineComponen...
Vue 3 生命周期完整指南
最新发布
2401_84434086的博客
04-29 492
/ 组合 API除了beforecate和created(它们被setup方法本身所取代)，我们可以在setup– 在挂载开始之前被调用：相关的render函数首次被调用。onMounted– 组件挂载时调用– 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。onUpdated– 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。onBeforeUnmount – 在卸载组件实例之前调用。
Vue3中setup语法糖下的常见生命周期钩子——onMounted和onBeforeMount
DM_Cxx的博客
06-06 8801
在setup语法糖下的onMounted和钩子函数主要区别就是是否能获取到html文档中的DOM实例，与Vue2.x时大同小异。个人感觉Vue3中的setup语法糖写法上更能让人明显感受到一个组件从实例创建到实例创建完成是经过了一条”生产线“，生产线由Vue官方团队提供，而其中提供的钩子函数则是交给用户自主定义，写Vue2.x的时候感悟还没那么深啊。附一个官方链接组合式API下的生命周期钩子文章有问题之处还望评论斧正！更多其他组合式API生命周期钩子文章链接放在下方⬇敬请期待！
Vue3-生命周期函数
qq_64067728的博客
09-20 890
在Vue3.x中，新增了一个setup生命周期函数，setup执行的时机是在beforeCreate生命函数之前执行，因为在这个函数中不能通过this来获取实例的；同时为了命名的统一，将beforeDestory改名为beforeUnmount，destoryed改名为unmounted。Vue中每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁、这就是一个组件所谓的生命中周期。Vue2.x中的生命周期。来访问组件的生命周期。
Vue3 生命周期
qq_42389674的博客
10-01 1185
vue3的生命周期与vue 2的不同点 vue3没有 beforeCreate和created 使用setUp代替了他们 onBeforeMount beforeMount与vue3的beforeMount用法一致 onMounted beforeMount与vue3的beforeMount用法一致 onBeforeUpdate beforeUpdate与vue3的beforeUpdate用法一致 onUpdated updated与vue3的updated用法一...
vue 3 学习笔记 vue3 vue3学习笔记
10-18
本文是关于 Vue 3 的学习笔记，涵盖了 Vue 3 的基础知识点，包括 Setup、Reactive、Ref、计算属性、Watch、生命周期函数、父子组件通信、Hook 等。 一、Setup Setup 是 Vue 3 中的组合式 API 的入口，在这里定义的...
vue2+vue3学习笔记
02-20
Vue2+Vue3 学习笔记 mounted 和 updated 在 Vue 中，`mounted` 和 `updated` 是两个非常重要的生命周期钩子函数。`mounted` 在页面初次加载时调用，而 `updated` 在数据改变并且要在页面重新渲染完成之后调用。...
vue3学习笔记，亲测有效，持续更新
06-14
这篇学习笔记将逐步介绍如何从零开始搭建一个 Vue3 项目，以及在开发过程中遇到的关键概念和功能。 首先，Vue3 的安装是通过命令行工具 CMD 来完成的。在你希望创建项目的位置打开终端，然后使用 Vue CLI 或 Vite ...
vue3自己的学习笔记
01-25
Vue 3 学习笔记 本文将详细介绍 Vue 3 中的新特性和变化，包括 Setup 函数、Reactive 数据、生命周期、计算属性、监听函数等等。 Setup 函数 在 Vue 3 中，Setup 函数是一个特殊的函数，它用于定义组件的初始状态...
学习Vue3 第十二章（认识组件&Vue3生命周期）
qq1195566313的博客
02-07 1万+
组件基础 每一个.vue 文件呢都可以充当组件来使用 每一个组件都可以复用 例如 helloWorld 充当子组件 父组件使用 引入子组件 helloWorld 然后直接就可以去当标签去使用 （切记组件名称不能与html元素标签名称一样） 组件的生命周期 简单来说就是一个组件从创建 到 销毁的 过程 成为生命周期 在我们使用Vue3 组合式API 是没有beforeCreate 和created 这两个生命周期的 onBeforeMount() 在组件DOM实...
Vue3学习第一天
qq_36982349的博客
04-19 529
vue中的应用 我们在vue3中如何使用vue? <div id="root"></div> // createApp创建一个 Vue 的应用, 存储到 app 变量中,全称是createApplication // 传入的参数表示,这个应用最外层的组件,应该如何展示 // Vue的编程是面向数据的编程 // mvvm 设计模式, m -> model 数据, v -> view 视图, vm -> viewModel 视图数据连接层 const app = Vue
vue3 基本使用
m0_52775179的博客
03-20 907
vue3
vue3生命周期
qq_44540152的博客
11-29 7824
对比下面两张生命周期可以看出，vue3使用beforeUnmount和unmounted替代了beforeDestroy和destroyed。vue3在初始化的时候已经挂载到容器，无需在beforeMount判断是否有根节点项配置。 vue3生命周期： 对比vue2生命周期 代码验证生命周期： vue3生命周期有两种配置方式： 第一种：通过配置使用生命周期钩子函数，在setup()外面配置 第二种：在组合式api中使用生命周期钩子函数，其中beforeCreate()、 created()相当于setu
Vue3 学习
a9874561328的博客
03-25 1675
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项目返回第三方页面onBeforeUnmount和onBeforeRouteLeave失效问题
mewmew1的博客
06-22 1万+
vue3项目埋点需求，需记录页面浏览时长，入口在第三方页面，从vue3页面返回到入口页时，onBeforeUnmount、onBeforeRouteLeave全部失效不执行，在vue3项目里组件之间跳转没问题。经测试，popstate事件监听pc端及移动端都失效；js的beforeUnload事件在pc端谷歌浏览器上返回第三方页面有效，vue项目内组件跳转无效，ios手机上全部无效。 解决方法： 监听js的pagehide事件，在pc端及移动端都有效，返回第三方页面和vue项目内跳转、vue项目里点击按钮跳
Vue3——第三章（生命周期钩子）
why404
01-10 7267
Vue3——第三章（生命周期钩子）
vue3和vue2的区别生命周期
08-17
- *3* [前端学习笔记（9）-Vue2和 Vue3生命周期区别](https://blog.csdn.net/JiangZhengyang7/article/details/128000710)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值