Vue3 生命周期

已于 2022-03-13 18:09:07 修改
阅读量1.1k 收藏 1
点赞数
分类专栏： vue3.0 从入门到精通 文章标签： html5 html css
于 2021-10-01 17:43:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42389674/article/details/120579314
版权

 

我们先来看一下，在父子组件嵌套时，父子组件的生命周期的执行顺序

父组件

 

子组件

 

 执行顺序输出

父子组件嵌套时组件的生命周期的执行顺序

onBeforeMount 和 onMounted

父组件的 onBeforeMount  --->  子组件的 onBeforeMount -->子组件的 onMounted  -->父组件的onMouted

vue3的生命周期与vue 2的不同点

vue3没有 beforeCreate和created 使用setUp代替了他们

onBeforeMount

beforeMount与vue3的beforeMount用法一致

虚拟dom生成 ，开始渲染dom节点，子组件在这个时候加载出

onMounted

beforeMount与vue3的beforeMount用法一致

onBeforeUpdate

beforeUpdate与vue3的beforeUpdate用法一致

onUpdated

updated与vue3的updated用法一致

onBeforeUnmount

beforeUnmount与 vue2的beforeUpdate用法是相同的

onUnmounted

unmounted与destroyed用法是相同的

onErrorCaptured

用与异常捕获的

丰的传说
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3生命周期--钩子函数图解（中文版）.svg
11-02
vue3生命周期--钩子函数图解（中文版）
vue3+ts (源码+笔记+生命周期截图)
02-14
vue3+ts (源码+笔记+生命周期截图)
day12vue3的生命周期函数、组件通信、使用ref
2301_78238711的博客
06-06 327
vue3的生命周期函数、组件通信、使用ref
vue3新语法
xingyunwei1的博客
10-19 857
使用defineComponent 构建应用及绑定事件 使用setup(props,content)父子通信 使用 reactive 绑定数据 使用 ref ( torefs ) 绑定数据 使用 getCurrentInstance 获取当前实例化对象上下文信息 watch、watchEffect 数据监听 生命周期+axios数据请求 .生命周期 setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method onBeforeMount() : 组
Vue 3 中的常用生命周期函数使用场景详解
最新发布
aike13ky的博客
05-05 1308
Vue 3 的生命周期钩子为开发者提供了在组件生命周期的不同阶段执行特定逻辑的能力。通过合理使用这些钩子，我们可以更好地管理组件的状态、DOM 操作和副作用，从而创建出更高效、更健壮的 Vue 应用程序。每个钩子都有其特定的使用场景，了解并正确使用它们可以大大提高我们的开发效率。
Vue源代码阅读10之从BeforeCreated到Created小结
jifukui的专栏
06-29 373
经过前面的讲解我们可以看到在完成BeforeCreated之后进行了inject、props、methods、data、computed、watch、provide这些用户定义的属性的初始化过程。其中inject和provide需要搭配使用用于数据跨越组件的数据的传输。最常见和使用的是组件状态的初始化，但是需要注意props、methods、data、computed这些属性的覆盖问题，在非发布模式将会进行报错，但是在发布模式下将不会进行报错直接执行。 当程序执行到这里表明cre...
vue3入门
zlting_的博客
07-25 1240
笔记
Vue3学习第一天
qq_36982349的博客
04-19 517
vue中的应用 我们在vue3中如何使用vue? <div id="root"></div> // createApp创建一个 Vue 的应用, 存储到 app 变量中,全称是createApplication // 传入的参数表示,这个应用最外层的组件,应该如何展示 // Vue的编程是面向数据的编程 // mvvm 设计模式, m -> model 数据, v -> view 视图, vm -> viewModel 视图数据连接层 const app = Vue
vue3学习笔记（6）生命周期
gtd54789的博客
04-24 652
Vue3专栏入口 一、 常用的生命周期钩子 没什么讲的就是一些概念，后边用到可以把案例写回来，暂时就了解一下哇。 # 我们最常用的，在创建组件前执行 setup() # 组件开始挂载前执行 onBeforeMount() # 组件挂载完执行 onMounted() # 组件更新前执行 onBeforeUpdate() # 组件更新后执行 onUpdated() # 组件卸载前执行 onBeforeUnmount() # 组件卸载后执行 onUnmounted() # 当A组件切换成B组件时 A组件消失后执行
vue组件生命周期详解
08-28
主要为大家详细介绍了vue组件生命周期，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3.0生命周期的示例代码
10-14
主要介绍了vue3.0生命周期的相关知识，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
浅析Vue 生命周期
08-27
主要介绍了Vue 生命周期的过程，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue3 学习
a9874561328的博客
03-25 1668
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之前...
学习Vue 3.0（2）
weixin_41403689的博客
05-29 617
学习Vue 3.0 (2)
【Vue】生命周期函数的新写法
看花容易绣花难
11-08 1207
生命周期函数的新写法
Vue3——第三章（生命周期钩子）
why404
01-10 7244
Vue3——第三章（生命周期钩子）
#Vue3篇： vue3生命周期setup--onBeforeMount--onMounted--onBeforeUpdate--onUpdated--onBeforeUnmount--onUnmou
...
03-12 354
【代码】#Vue3篇： vue3生命周期setup--onBeforeMount--onMounted--onBeforeUpdate--onUpdated--onBeforeUnmount--onUnmou。
【vue3系列】vue3之生命周期(带图)
热门推荐
qq_42445025的博客
12-16 5万+
Vue3之生命周期 主要Vue生命周期事件被分为两个钩子，分别在事件之前和之后调用，vue应用程序中有4个主要事件(8个钩子)： 创建 ---- 在组建创建时执行 挂载 ---- DOM被挂载时执行 更新 ---- 当响应数据被修改时执行 销毁 ---- 在元素被销毁之前立即执行 在【options API】中，生命周期钩子是被暴露在vue实例上的选项，我们只需要调用使用即可。 在【composition API】中，我们需要将生命周期钩子导入项目，然后才能使用。 import {onMounted
记一次vue3页面倒计时（定时器）切换页面问题
qq_43393995的博客
08-31 2891
场景：从含有定时器的页面切换到其他页面时，创建的定时器没有销毁，定时器继续执行，相应的事件也一直在进行；onBeforeUpdate：DOM即将更新。onBeforeMount：DOM即将挂载。onBeforeUnmount：即将销毁。onMounted：DOM挂载完毕。onUpdated：DOM更新完毕。setup相当于之前的created周期：创建时。onUnmounted：销毁完毕。与 2.x 版本生命周期相对应的组合式 API。............
vue 3 生命周期
07-28
回答: 在Vue3中，生命周期钩子函数的数量和名称发生了变化。新增了两个生命周期钩子函数：beforeUnmount和unmounted，同时将之前的beforeCreate和created合并为一个setup钩子函数。\[1\]在Vue3中，引入了一个新的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值