vue3-生命周期

​🌈个人主页:前端青山
🔥系列专栏:Vue篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来vue篇专栏内容:vue3-生命周期

目录

 vue3生命周期

vue3生命周期钩子

1.1 onMounted()

1.2 onUpdated()

1.3 onUnmounted()

1.4 onBeforeMount()

1.5 onBeforeUpdate()

1.6 onBeforeUnmount()

1.7 onActivated

1.8 onDeactivated

1.9 onErrorCaptured

Vue 的父子组件生命周期钩子函数执行顺序​

 vue3生命周期

选项式API中将 beforeDestroy 以及 destroyed 修改为 beforeUnmount 和 unmounted,其余一致

生命周期钩子 | Vue.js

如果是vue2的生命周期钩子函数 errorCaptured

完整案例: vue2.html 官方解释

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue2的生命周期钩子函数</title>
</head>
<body>
  <div id="app">
    <button @click="add">加1</button> {{ count }}
  </div>
</body>
<script src="../lib/vue.js"></script>
<script>
  /**
   * mounted  *****  数据请求,DOM操作,定时器,计时器等,实例化,订阅数据
   * created  ***    数据请求
   * updated  *
   * beforeDestroy ****  消除定时器 记时器 取消数据订阅等
   * */
  const app = new Vue({
    data: {
      count: 0
    },
    methods: {
      add () {
        this.count++
        if (this.count === 5) {
          this.$destroy()
        }
      }
    },
    beforeCreate () { // 备孕
      // 在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用
      console.log('beforeCreate')
    },
    created () { // 怀上了
      // 在实例创建完成后被立即同步调用。在这一步中,实例已完成对选项的处理,意味着以下内容已被配置完毕:数据侦听、计算属性、方法、事件/侦听器的回调函数。然而,挂载阶段还没开始,且 $el property 目前尚不可用。
      console.log(this.$el)
      console.log('created')
    },
    beforeMount () {// 生下来以前
      // 在挂载开始之前被调用:相关的 render 函数首次被调用。
      console.log('beforeMount')
    },
    mounted () { // 生下了
      // 实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了。
      // 如果根实例挂载到了一个文档内的元素上,当 mounted 被调用时 vm.$el 也在文档内。
      console.log(this.$el)
      console.log('mounted')
    },
    beforeUpdate () {
      // 在数据发生改变后,DOM 被更新之前被调用。
      // 这里适合在现有 DOM 将要被更新之前访问它,比如移除手动添加的事件监听器。
      console.log('beforeUpdate')
    },
    updated () { 
      // 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
      console.log('updated')
    },
    beforeDestroy () {
      // 实例销毁之前调用。在这一步,实例仍然完全可用。
      console.log('beforeDestroy')
    },
    destroyed () { // gg
      // 实例销毁后调用。该
      console.log('destroyed')
    }
  })
​
  app.$mount('#app')
</script>
</html>

vue3.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue3的生命周期钩子函数</title>
</head>
<body>
  <div id="app">
    <button @click="add">加1</button> {{ count }}
  </div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
  /**
   * mounted  *****  数据请求,DOM操作,定时器,计时器等,实例化,订阅数据
   * created  ***    数据请求
   * updated  *
   * beforeUnmount ****  消除定时器 记时器 取消数据订阅等
   * */
  const app = Vue.createApp({
    data () {
      return {
        count: 0
      }
    },
    methods: {
      add () {
        this.count++
        if (this.count === 5) {
          app.unmount()
        }
      }
    },
    beforeCreate () { // 备孕
      console.log('beforeCreate')
    },
    created () { // 怀上了
      console.log('created')
    },
    beforeMount () {// 生下来以前
      console.log('beforeMount')
    },
    mounted () { // 生下了
      console.log('mounted')
    },
    beforeUpdate () {
      console.log('beforeUpdate')
    },
    updated () { 
      console.log('updated')
    },
    beforeUnmount () {
      console.log('beforeDestroy')
    },
    unmounted () { // gg
      console.log('destroyed')
    }
  })
​
  app.mount('#app')
</script>
</html>
03_lifeCycle/03_lifeCycle_vue3.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue3的生命周期钩子函数</title>
</head>
<body>
  <div id="app">
    <button @click="add">加1</button> {{ count }}
  </div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
  /**
   * mounted  *****  数据请求,DOM操作,定时器,计时器等,实例化,订阅数据
   * created  ***    数据请求
   * updated  *
   * beforeUnmount ****  消除定时器 记时器 取消数据订阅等
   * */
  const { createApp, ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } = Vue
  const app = createApp({
    setup () {
      const count = ref(0)
​
      onBeforeMount(() => {
        console.log('onBeforeMount')
      })
​
      onMounted(() => {
        console.log('onMounted')
      })
​
      onBeforeUpdate(() => {
        console.log('onBeforeUpdate')
      })
​
      onUpdated (() => {
        console.log('onUpdated')
      })
​
      onBeforeUnmount(() => {
        console.log('onBeforeUnmount')
      })
​
​
      onUnmounted(() => {
        console.log('onUnmounted')
      })
​
      const add = () => {
        count.value += 1
        if (count.value === 5) {
          app.unmount()
        }
      }
​
​
      return {
        count, add
      }
    }
  })
​
   app.mount('#app')
</script>
</html>

vue3生命周期钩子

1.1 onMounted()

注册一个回调函数,在组件挂载完成后执行。

组件在以下情况下被视为已挂载:

  • 其所有同步子组件都已经被挂载 (不包含异步组件或 <Suspense> 树内的组件)。

  • 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时,才可以保证组件 DOM 树也在文档中。

这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用,或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端执行。

1.2 onUpdated()

注册一个回调函数,在组件因为响应式状态变更而更新其 DOM 树之后调用。

父组件的更新钩子将在其子组件的更新钩子之后调用。

这个钩子会在组件的任意 DOM 更新后被调用,这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM,请使用 nextTick() 作为替代。

1.3 onUnmounted()

注册一个回调函数,在组件实例被卸载之后调用。

一个组件在以下情况下被视为已卸载:

  • 其所有子组件都已经被卸载。

  • 所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。

可以在这个钩子中手动清理一些副作用,例如计时器、DOM 事件监听器或者与服务器的连接。

1.4 onBeforeMount()

注册一个钩子,在组件被挂载之前被调用。

当这个钩子被调用时,组件已经完成了其响应式状态的设置,但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。

1.5 onBeforeUpdate()

注册一个钩子,在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。

1.6 onBeforeUnmount()

注册一个钩子,在组件实例被卸载之前调用。

当这个钩子被调用时,组件实例依然还保有全部的功能。

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>生命周期</title>
</head>
<body>
  <div id='app'>
    {{ count }}
    <button @click="add1">加1</button>
  </div>
</body>
<script src='../lib/vue.global.js'></script>
<script>
    const { 
      createApp, 
      ref,
      onBeforeMount,
      onMounted,
      onBeforeUpdate,
      onUpdated,
      onBeforeUnmount,
      onUnmounted,
      onErrorCaptured
    } = Vue
    const app = createApp({
      setup () {
​
        const count = ref(0)
​
        const add = () => {
          count.value++
          if (count.value === 5) {
            app.unmount()
          }
        }
        onErrorCaptured(() => {
          console.log('出错了')
        })
       
        onBeforeMount(() => {
          console.log('onBeforeMount')
        })
        onMounted(() => {
          console.log('onMounted')
        })
        onBeforeUpdate(() => {
          console.log('onBeforeUpdate')
        })
        onUpdated(() => {
          console.log('onUpdated')
        })
        onBeforeUnmount(() => {
          console.log('onBeforeUnmount')
        })
        onUnmounted(() => {
          console.log('onUnmounted')
        })
​
        return {
          count,
          add
        }
      }
    })
​
    app.mount('#app')
</script>
</html>

1.7 onActivated

当包含该组件的路由被激活时调用。对应 Vue Router 的 beforeRouteEnter 导航守卫。

1.8 onDeactivated

当包含该组件的路由将要离开激活状态时调用。对应 Vue Router 的 beforeRouteLeave 导航守卫。

1.9 onErrorCaptured

注册一个钩子,在捕获了后代组件传递的错误时调用

Vue 的父子组件生命周期钩子函数执行顺序​

  • 加载渲染过程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

  • 子组件更新过程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

  • 父组件更新过程

父 beforeUpdate -> 父 updated

  • 销毁过程

父 beforeDestroy ->子 beforeDestroy -> 子 destroyed -> 父 destroyed

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/180707.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2024年天津专升本招生计划及其收费标准

2024年天津专升本招生计划及其收费标准 天津农学院 文史类 人力资源管理 20 4400 文史类 物流管理 20 4400 理工类 人力资源管理 10 4400 理工类 物流管理 10 4400 理工类 水文与水资源工程 30 5400 有专业限制 理工类 水产养殖学 20 4400 有专业限制 天津…

ui5使用echart

相关的代码已经发布到github上。 展示下相关的实现功能 1、柱状图-1 2、柱状图-2 3.折线图 4.饼状图 如何使用&#xff1a; 使用git clone项目到本地 git clone https://github.com/linhuang0405/com.joker.Zechart找到index.html。在vscode里右键选择Open with Live Serve…

我的创业之路:3个月的经历与回顾

从金山办公离职到现在已过去差不多3个月的时间&#xff0c;自己开发的产品也逐步稳定&#xff0c;是时候总结和回顾一下这三个月的心路历程了 起点 离职后&#xff0c;我思考过很多个创业项目&#xff0c;最后还是选择了做一款在线打字练习的网站。其主要原因如下&#xff1a…

杨传辉:从一体化架构,到一体化产品,为关键业务负载打造一体化数据库

在刚刚结束的年度发布会上&#xff0c;OceanBase正式推出一体化数据库的首个长期支持版本 4.2.1 LTS&#xff0c;这是面向 OLTP 核心场景的全功能里程碑版本&#xff0c;相比上一个 3.2.4 LTS 版本&#xff0c;新版本能力全面提升&#xff0c;适应场景更加丰富&#xff0c;有更…

关于APP备案的通知以及APP备案的常见问题

前言 众所周知今年8月份&#xff0c;工信部出台了《工业和信息化部关于开展移动互联网应用程序备案工作的通知》&#xff0c;APP开发者的影晌是显而易见的。开发者需要按照要求提交相关材料进行备案&#xff0c;这无疑增加了开发者的时间和精力成本。虽然备案制度会增加开发者…

探针台的应用领域

探针台&#xff08;Probe Station&#xff09;是一种用于对半导体器件进行电性能测试的重要设备。它通常由精密的机械结构、高性能的探针针头和电性能测试仪器组成。探针台可以对半导体芯片、集成电路和其他微电子器件进行直接的电性能测试&#xff0c;从而为研究和生产提供有价…

Docker部署Vue+Springboot项目

一、部署Springboot项目 1.1先将本地的java项目打成jar包。 再右上角进行maven操作。 1.2将jar包上传到服务器当中。 先再目录/home 下创建一个文件夹&#xff08;classRoom&#xff09;用于存放后端打镜像时需要的文件。 如果是服务器的话可以直接将文件拖拽到想要转移的地方…

python数据结构与算法-15_堆与堆排序

堆(heap) 前面我们讲了两种使用分治和递归解决排序问题的归并排序和快速排序&#xff0c;中间又穿插了一把树和二叉树&#xff0c; 本章我们开始介绍另一种有用的数据结构堆(heap)&#xff0c; 以及借助堆来实现的堆排序&#xff0c;相比前两种排序算法要稍难实现一些。 最后我…

Unity UI设计 软件构造实验报告

实验1: 仿真系统的UI主界面设计 1.实验目的 &#xff08;1&#xff09;熟悉Unity中UI界面的设计与编写&#xff1b; &#xff08;2&#xff09;熟悉UI界面中场景转换,UI与场景内容相互关联的方式。 &#xff08;3&#xff09;熟悉Unity中MySQL数据库的操作 2.实验内容 新建…

分布式锁之基于redis实现分布式锁(二)

2. 基于redis实现分布式锁 2.1. 基本实现 借助于redis中的命令setnx(key, value)&#xff0c;key不存在就新增&#xff0c;存在就什么都不做。同时有多个客户端发送setnx命令&#xff0c;只有一个客户端可以成功&#xff0c;返回1&#xff08;true&#xff09;&#xff1b;其他…

在线视频课程教育系统源码/网课网校/知识付费/在线教育系统/在线课程培训系统源码

源码简介&#xff1a; 在线视频课程教育系统源码&#xff0c;作为网课/网校/知识付费/在线教育系统&#xff0c;它有文章付费阅读在线点播自动发货付费阅读VIP会员系统等功能。它是实用的在线课程培训系统源码。 发货100-在线视频课程教育系统&#xff0c;它是一款功能实用的…

PC8250(CC-CV控制)5V/8A同步降压恒流恒压软启动带EN功能只需极少外围元件

概述 PC8250是一个同步降压转换器输出电流至8A。它的设计允许操作电源电压范围从9V到42V。外部关闭功能可以通过逻辑电平来控制COMP/EN引脚下降&#xff0c;然后进入待机模式。外部补偿使反馈控制具有良好的线路和负载调节&#xff0c;外部设计灵活。PC8250在CC&#xff08;恒定…

【C语言】深入解开指针(四)

&#x1f308;write in front :&#x1f50d;个人主页 &#xff1a; 啊森要自信的主页 ✏️真正相信奇迹的家伙&#xff0c;本身和奇迹一样了不起啊&#xff01; 欢迎大家关注&#x1f50d;点赞&#x1f44d;收藏⭐️留言&#x1f4dd;>希望看完我的文章对你有小小的帮助&am…

基于Pytorch框架多人多摄像头摔倒跌倒坠落检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 深度学习在计算机视觉领域的应用已经取得了显著的进展&#xff0c;特别是在多人多摄像头场景下的摔倒跌倒检测。通过…

OpenSearch开发环境安装Docker和Docker-Compose两种方式

文章目录 简介常用请求创建映射写入数据查询数据其他 安装Docker方式安装OpenSearch安装OpenSearchDashboard Docker-Compose方式Docker-Compose安装1.设置主机环境2.下载docker-compose.yml文件3.启动docker-compose4.验证 问题问题1&#xff1a;IPv4 forwarding is disabled.…

给数据库查询结果添加一个额外的自增编号

1、在mysql数据库可以执行的sql SELECT( i : i 1 ) num,M.* FROMuser M,( SELECT i : 0 ) AS ID GROUP BYM.ID ORDER BYM.create_time SELECT (i :i 1) 是为了生成自增的序列号字段 SELECT i : 0 是为了将i进行初始化每次查询的序列号都会从1开始进行排序生成序列号 在…

docker部署paddleocr

内容仅供参考学习 欢迎朋友们V一起交流&#xff1a; zcxl7_7 环境 1. CentOS7  2. docker  3. PaddleOCR2.5.2 1.准备 1. 首先准备好需要打包的项目 2. 在该项目中创建Dockerfile文件 touch Dockerfile2. 编写Dockerfile # 从Python 3.8的官方镜像中创建(pyt…

快速排序演示和代码介绍

快速排序的核心是(以升序为例)&#xff1a;在待排序的数据中指定一个数做为基准数&#xff0c;把所有小于基准数的数据放到基准数的左边&#xff0c;所有大于基准数的数据放在右边&#xff0c;这样的话基准数的位置就确定了&#xff0c;然后在两边的数据中重复上述操作

5G智慧工地整体解决方案:文件全文115页,附下载

关键词&#xff1a;5G智慧工地&#xff0c;智慧工地建设方案&#xff0c;智慧工地管理平台系统&#xff0c;智慧工地建设调研报告&#xff0c;智慧工地云平台建设 一、5G智慧工地建设背景 5G智慧工地是利用5G技术、物联网、大数据、云计算、AI等信息技术&#xff0c;围绕“人…

SANSAN新鲜事|理清!如何降低数字工厂建设成本

根据调研结果&#xff0c;在中国&#xff0c;只有10%的企业已经完全实施数字化工厂解决方案或目前处于最后阶段。工厂数字化的进展比企业的预期要慢得多&#xff0c;原因包括复杂的系统环境和多样化的机器版图&#xff0c;以及在整个生产网络中推广单个解决方案的相关挑战。实施…