美文网首页
Vue3.x----生命周期

Vue3.x----生命周期

作者: 沃德麻鸭 | 来源:发表于2021-09-14 09:08 被阅读0次

一、回顾vue2.x生命周期钩子函数:

1.beforeCreate 

2.created ----进行异步操作,触发一次

3.beforeMount

4.mounted----操作DOM的最早时机

5.beforeUpdate

6.updated----操作最新的DOM元素,多次触发

7.beforeDestroy

8.destroyed

二、认识vue3.0生命周期钩子函数

1.setup 创建实例前

2.onBeforeMount  挂载DOM前

3.onMounted 挂载DOM后

4.onBeforeUpdate 更新组件前

5.onUpdated 更新组件后

6.onBeforeUnmount 卸载销毁前

7.onUnmounted  卸载销毁后

代码演示

总结:

1.Vue3生命周期的函数发生了变化

2.去掉两个:beforeCreate和created,添加了setup

3.方法名称发生变化:方法名称前面多了个on,中间是驼峰式的

4.卸载组件的生命周期变化:onBeforeUnmount 、onUnmounted

5.同一个生命周期可以触发多次

相关文章

  • Vue3.x----生命周期

    一、回顾vue2.x生命周期钩子函数: 1.beforeCreate 2.created ----进行异步操作,触...

  • Vue生命周期

    什么是生命周期方法?生命周期钩子=生命周期函数=生命周期事件 Vue生命周期方法分类  创建期间的生命周期方法: ...

  • 认识Vue3.x----项目代码结构分析

    入口main.js: 总结: 1.Vue的实例化方式发生变化:基于createApp方法进行实例化 2.route...

  • Activity,Fragment,Service生命周期图

    Activity生命周期 Fragment生命周期 Service生命周期

  • 10,vue生命周期

    生命周期钩子=生命周期函数=生命周期事件 根据生命周期的不同分为三类: 创建阶段的生命周期 运行阶段的生命周期 销...

  • 微信小程序生命周期的记录

    小程序中生命周期分为3类: 应⽤的生命周期 页面的生命周期 组件的生命周期 一、生命周期 1. 应⽤的生命周期[h...

  • Lifecycle 生命周期源码解析

    目录: 什么生命周期 什么是生命周期感知型组件 Activity是如何把生命周期传给生命周期感知组件的 生命周期 ...

  • Vue生命周期

    Vue生命周期详解 一、Vue生命周期 与 作用 (生命周期钩子就是生命周期函数) (1)Vue生命周期:每个Vu...

  • uni-app微信小程序开发 - 生命周期

    uni-app的生命周期分为应用生命周期和页面生命周期还有组件生命周期。 应用生命周期[https://uniap...

  • 【小程序】生命周期

    小程序生命周期分为两类:应用生命周期和页面生命周期。 应用生命周期 应用生命周期包括onLaunch、onShow...

网友评论

      本文标题:Vue3.x----生命周期

      本文链接:https://www.haomeiwen.com/subject/itggwltx.html