Vue3 生命周期

如下是Vue3的生命周期函数图: 

一、Vue2生命周期和Vue3声明周期的区别

1.  Vue2 中,只要创建Vue实例对象而不需要挂载就可以实现beforeCreate 和 created 生命周期函数。

Vue3中必须要将Vue实例对象挂载完成,所有的准备工作做完,才可以开始实现beforeCreate 和 created 生命周期函数。

2.  Vue2 我们销毁组件,触发的是beforeDestroy 和 destroyed 函数。

在Vue3中,我们销毁组件变为了卸载组件,实现的功能是一致的,不过只是称呼变了,触发的生命周期函数为beforeUnmount 和 unmounted。

二、Vue3生命周期的使用

(一)以配置项的形式调用

和Vue2中调用生命周期函数的方法一致,注意是与setup函数平级。

如下生命周期函数有不懂的,可以参考这篇文章:

Vue生命周期-CSDN博客

export default {
  name: "MyItem",
  setup() {},
  beforeCreate() {
    console.log("beforeCreate生命周期函数");
  },
  created() {
    console.log("created生命周期函数");
  },
  beforeMount() {
    console.log("beforeMount生命周期函数");
  },
  mounted() {
    console.log("mounted生命周期函数");
  },
  beforeUpdate() {
    console.log("beforeUpdate生命周期函数");
  },
  updated() {
    console.log("update生命周期函数");
  },
  beforeUnmount() {
    console.log("beforeUnmount生命周期函数");
  },
  unmounted() {
    console.log("unmounted生命周期函数");
  },
};

(二)以composition API 形式调用

以上的生命周期函数和composition API 对应形式如下:

beforeCreate ----> setup()

created ----> setup()

beforeMount ----> onBeforeMount

mounted ----> onMounted

beforeUpdate ----> onBeforeUpdate

updated ----> onUpdated

beforeUnmount ----> onBeforeUnmount

unmounted ----> onUnmounted

使用以上composition API 之前需要先对要使用的API按需引入:

 import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from "vue";

语法格式如下:

API (() => {  // 内部执行内容  })

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from "vue";

export default {
  name: "MyItem",
  setup() {
    onBeforeMount(() => {
      console.log("beforeMount生命周期函数");
    })
      onMounted(() => {
        console.log("mounted生命周期函数");
      })
    onBeforeUpdate(() => {
      console.log("beforeUpdate生命周期函数");
    })
    onUpdated(() => {
      console.log("update生命周期函数");
    })
    onBeforeUnmount(() => {
      console.log("beforeUnmount生命周期函数");
    })
    onMounted(() => {
      console.log("unmounted生命周期函数");
    })
  }
};

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

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

相关文章

V10 桌面版、服务器版系统加固

V10 桌面版、服务器版系统加固 一、 文档说明 本文档中涉及的加固方法主要包括:密码策略配置、防火墙规 则配置、禁用高风险服务等。 二、 V10 桌面版系统加固 2.1 密码策略配置 密码策略包括密码老化控制策略和密码复杂度策略。密码老化 控制策略需要配置/etc…

Git客户端(TortoiseGit)使用

参考文章: https://www.cnblogs.com/xuwenjin/p/8573603.html 【精选】使用TortoiseGit工具进行开发(连接远程仓库进行克隆、拉取、获取、提交、推送、新建/切换/合并分支、解决冲突)_tortoisegit连接远程仓库-CSDN博客 tortoise git 拉取…

二进制的形式在内存中绘制一个对象实例

一、引用类型实例的内存布局 从内存布局的角度来看,一个引用类型的实例由如下图所示的三部分组成:ObjHeader TypeHandle Fields。前置的ObjHeader用来缓存哈希值和同步状态,TypeHandle部分存储类型对应方法表(Method Table&…

2023.11.17 -hivesql调优,数据压缩,数据存储

目录 1.hive命令和参数配置 2.hive数据压缩 3.hive数据存储 0.原文件大小 18.1MB 1.textfile行存储格式, 压缩后size:18MB 2.行存储格式:squencefile ,压缩后大小8.89MB​ 3. 列存储格式 orc - ZILIB ,压缩后大小2.78MB 4.列存储格式 orc-snappy ,压缩后大小3.75MB 5…

设计模式-中介者模式-笔记

Medicator中介者模式 动机(Motivation) 在软件构建过程中,经常会出现多个对象相互关联交际的情况,对象之间常常会维持一种复杂的引用关系,如果遇到一些需求的更改,这种直接的引用关系将面临不断的变化。 …

简单回顾矩阵的相乘(点乘)230101

[[1 0 1][1 1 0]] [[3 0 0 3][2 2 1 3][1 3 1 1]] [[4. 3. 1. 4.][5. 2. 1. 6.]]乘以 c11 a11*b11 a12*b21 a13*b31 1*3 0*2 1*1 4 c12 a11*b12 a12*b22 a13*b32 1*0 0*2 1*3 3 c13a11*b13 a12*b23a13*b33 c14a11*b14 a12*b24a13*b34 c21a21*b11 a22*b21 a23*b…

【iDRAC】突破错误信息壁垒,利用iDRAC提高效率

序 面对旧服务器上的黄色警示灯,工作人员往往陷入困惑。更糟糕的是,如果该服务器转手多次,缺少root用户密码和IP地址,那么要访问服务器iDRAC就更困难了。但是出现问题的硬件蕴含着重要信息,为了解开这个谜团&#xff…

基于STC12C5A60S2系列1T 8051单片的IIC总线器件数模芯片PCF8591实现数模转换应用

基于STC12C5A60S2系列1T 8051单片的IIC总线器件数模芯片PCF8591实现数模转换应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍IIC总线器件数模芯片PCF8591介绍通过按…

windows11编译ffmpeg

安装msys2,直接https://www.msys2.org/上下载exe安装即可,默认路径; 选择msys2-mingw64启动,将下载源替换为中科大 sed -i "s#mirror.msys2.org/#mirrors.ustc.edu.cn/msys2/#g" /etc/pacman.d/mirrorlist*pacman -S…

RocketMQ的适用场景有哪些?

程序员的公众号:源1024,获取更多资料,无加密无套路! 最近整理了一波电子书籍资料,包含《Effective Java中文版 第2版》《深入JAVA虚拟机》,《重构改善既有代码设计》,《MySQL高性能-第3版》&…

Leetcode刷题详解——衣橱整理

1. 题目链接:LCR 130. 衣橱整理 2. 题目描述: 家居整理师将待整理衣橱划分为 m x n 的二维矩阵 grid,其中 grid[i][j] 代表一个需要整理的格子。整理师自 grid[0][0] 开始 逐行逐列 地整理每个格子。 整理规则为:在整理过程中&am…

解决:Android TextView 设置斜体后右侧文字被遮挡

一、问题说明 遇到一个比较奇怪的情况&#xff0c;给 TextView 文字设置倾斜后&#xff0c;右侧的文字会被遮挡&#xff0c;感觉这应该是 Android 的一个 bug &#xff01; 上代码&#xff1a; <TextViewandroid:id"id/tv_title"android:layout_width"wra…

【计算机网络笔记】网络地址转换(NAT)

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…

GO语言的由来与发展历程

Go语言&#xff0c;也称为Golang&#xff0c;是由Google公司的Robert Griesemer、Ken Thompson和Rob Pike三个大牛于2007年开始设计发明&#xff0c;并于2009年正式对外发布的开源编程语言。 三名初始人的目标是设计一种适应网络和多核时代的C语言&#xff0c;Go语言从C继承了…

Rust 语言中的结构体

目录 1、结构体 2、结构体的定义和实例化 2.1 使用字段初始化简写语法 2.2 使用结构体更新语法从其他实例创建实例 2.3 没有命名字段的元组结构体 2.4 没有任何字段的类单元结构体 2.5 结构体示例程序 3、方法 3.1 关联函数 3.2 多个 impl 块 1、结构体 struct&…

2023年09月 Python(六级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试(1~6级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 以下选项中,不是tkinter变量类型的是?( ) A: IntVar() B: StringVar() C: DoubleVar() D: FloatVar() 答案:D tkinter 无 FloatVar()变量类型。 第2题 关于tkinter,以下说…

C++二分算法:使数组严格递增

涉及知识点 动态规划 二分查找 题目 给你两个整数数组 arr1 和 arr2&#xff0c;返回使 arr1 严格递增所需要的最小「操作」数&#xff08;可能为 0&#xff09;。 每一步「操作」中&#xff0c;你可以分别从 arr1 和 arr2 中各选出一个索引&#xff0c;分别为 i 和 j&#…

OceanBase:中国场景推动树立分布式数据库四项新标准

11月16日&#xff0c;在OceanBase2023年度发布会上&#xff0c;OceanBase CEO杨冰介绍&#xff0c;中国数字经济的蓬勃发展催生了对分布式数据库的强大需求&#xff0c;这种需求也牵引了OceanBase坚定投入自主研发&#xff0c;从而推动树立了分布式数据库的四项新标准。 据了解…

【计算机组成原理】定点加法、减法运算

系列文章目录 绘制出纯整数(1字节)和纯小数的数轴 将十进制数20.59375&#xff0c;转换成754标准的32位浮点数的二进制存储格式 用双符号位补码求 x 0.1010011, y -0.1001010, 分别求出 x y, x - y&#xff0c;并判溢出

单例模式(常用)

单例模式&#xff08;单例设计模式) 在有些系统中&#xff0c;为了节省内存资源、保证数据内容的一致性&#xff0c;对某些类要求只能创建一个实例&#xff0c;这就是所谓的单例模式。 单例模式的定义与特点 单例&#xff08;Singleton&#xff09;模式的定义&#xff1a;指…