vue3里面生命周期的使用

前言:

vue2里面的生命周期和vue3生命周期是非常的相似的,我们通过访问生命周期钩子来处理不同场景之间的应用。
生命周期钩子的函数定义:每一个Vue组件实例在创建时都需要经历一系列的初始化步骤,比如数据侦听,编译模板,挂载实例到DOM,以及在数据改变时更新DOM。在此过程中的阶段我们称为是生命周期钩子函数。

这里我们使用的vue3生命周期函数为组合式API下的生命周期函数的。【组合式写法没有 beforeCreate / created 生命周期,并且组合式写生命周期用哪个先引哪个】。

备注:在这里,beforecreate 和 created 被 setup 方法本身所替代。

vue2里面的生命周期函数是选项式API下的生命周期函数,里面就包含 beforeCreate / created 生命周期。

一、选项式和组合式下的生命周期函数对比如下

在这里插入图片描述
在这里插入图片描述
主要 Vue 生命周期事件被分为两个钩子,分别在事件之前和之后调用,vue 应用程序中有4个主要事件(8个钩子):

  • 创建 ---- 在组建创建时执行
  • 挂载 ---- DOM 被挂载时执行
  • 更新 ---- 当响应数据被修改时执行
  • 销毁 ---- 在元素被销毁之前立即执行
    在【options API】中,生命周期钩子是被暴露在 vue 实例上的选项,我们只需要调用使用即可。

在【composition API】中,我们需要将生命周期钩子导入项目,然后才能使用。

二、生命周期函数分为哪几种,具体作用和用法如下:

1、beforeCreate

  1. beforeCreate选项式声明周期函数
  2. 在组件实例初始化之前调用(props解析已解析、data和computed等选项还未处理)
  3. 不能访问组件的实例this及其组件中的数据源和函数等
  4. 不能访问组件中的视图DOM元素
  5. 组合式 API 中的setup()钩子会在所有选项式 API 钩子之前调用

选项式写法如下:

    // 组件实例话之前
    // 可以访问 props 的数据的
    // 不能访问组件的实例 this 中的数据源和函数等
    // 不能访问组件中的视图DOM元素
 beforeCreate() {
   console.log('----------------------------')
     console.log('beforeCreate 组件实例话之前')
     console.log(this.$props.subtitle)
     console.log('不能访问组件的实例 this 中的数据源和函数等');
     console.log('不能访问组件中的视图DOM元素');
     // console.log(this.age)
     // this.showMessage()
     // console.log(document.getElementById('title').innerHTML)
 }

2、created

  1. created选项式生命周期函数
  2. 在组件实例化成功后调用
  3. 可访问组件的实例this及其组件中的数据源和函数等
  4. 不能访问组件中的视图DOM元素

选项式写法如下:

	// 组件视图渲染之前
    // 可以访问组件中的数据,函数,自定义的属性等
    // 不能访问组件中的视图DOM元素
    beforeMount() {
        console.log('----------------------------')
        console.log('beforeMount 组件视图渲染之前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log('不能访问组件中的视图DOM元素');
        // console.log(document.getElementById('title').innerHTML)
    },

3、beforeMount/onBeforeMount

  1. beforeMount:选项式生命周期函数、onBeforeMount:组合式生命周期钩子
  2. 组件视图在浏览器渲染之前调用
  3. 可访问组件实例东西(数据源、函数、计算属性等)
  4. 不能访问组件视图中的DOM元素

选项式写法:

 	 // 组件视图渲染之前
    // 可以访问组件中的数据,函数,自定义的属性等
    // 不能访问组件中的视图DOM元素
    beforeMount() {
        console.log('----------------------------')
        console.log('beforeMount 组件视图渲染之前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log('不能访问组件中的视图DOM元素');
        // console.log(document.getElementById('title').innerHTML)
    },

组合式写法:

import { onBeforeMount} from 'vue'
// 组件视图渲染之前
// 能访问组件实例的东西(数据源、函数等)
// 但是不能访问组件视图中的 DOM 元素
onBeforeMount(() => {
    console.log('------------------------')
    console.log('onBeforeMount 组件视图渲染之前(生命周期钩子)')
    console.log(age.value)
    showMessage()
    console.log('不能访问组件视图中的 DOM 元素');
    // console.log(document.getElementById('title').innerHTML)
})

4、mounted/onMounted

  1. mounted:选项式生命周期函数、onMounted:组合式生命周期钩子
  2. 组件视图在浏览器渲染之后调用
  3. 可访问组件实例东西(数据源、函数、计算属性等)
  4. 可以访问组件视图中的DOM元素

选项式写法:

  // 组件视图渲染之后
    // 可以访问组件中的数据,函数,自定义的属性等
    // 不能访问组件中的视图DOM元素
    mounted() {
        console.log('----------------------------')
        console.log('mounted 组件视图渲染之后')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    }

组合式写法:

import { onMounted} from 'vue'
// 组件视图渲染之后
// 能访问组件实例的东西(数据源、函数等)
// 可以访问组件视图中的 DOM 元素
onMounted(() => {
    console.log('------------------------')
    console.log('onMounted 组件视图渲染之后(生命周期钩子)')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})

5、beforeUpdate/onBeforeUpdate

  1. beforeUpdate:选项式生命周期函数、onBeforeUpdate:组合式生命周期钩子
  2. 数据源发生变化时,组件视图重新渲染之前调用
  3. 可访问组件实例东西(数据源、函数、计算属性等)
  4. 可以访问该组件中在更新之前的DOM元素,但是不能访问该组件中在更新之后的DOM元素

选项式写法:

 // 数据源发生改变,视图重新渲染前
    // 可以访问组件中的数据,函数,自定义的属性等
    // 可访问重新渲染的 DOM 元素之前的状态
    beforeUpdate() {
        console.log('----------------------------')
        console.log('beforeUpdate 数据源发生改变,视图重新渲染前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },

组合式写法:

import { onBeforeUpdate } from 'vue'
// 数据源发生变化,组件视图重新渲染之前
// 能访问组件实例的东西(数据源、函数等)
// 能访问组件视图渲染之前的 DOM 元素
onBeforeUpdate(() => {
    console.log('------------------------')
    console.log('onBeforeUpdate 数据源发生变化,组件视图重新渲染之前(生命周期钩子)')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})

6、updated/onUpdated

  1. updated:选项式生命周期函数、onUpdated:组合式生命周期钩子
  2. 数据源发生变化时,组件视图重新渲染之后调用
  3. 可访问组件实例东西(数据源、函数、计算属性等)
  4. 不可以访问该组件中在更新之前的DOM元素,但是可以访问该组件中在更新之后的DOM元素

选项式写法:

 // 数据源发生改变,视图重新渲染后
    // 可以访问组件中的数据,函数,自定义的属性等
    // 可访问重新渲染的 DOM 元素之后的状态
    updated() {
        console.log('----------------------------')
        console.log('updated 数据源发生改变,视图重新渲染后')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },

组合式写法:

import { onUpdated } from 'vue'
// 数据源发生变化,组件视图重新渲染之后
// 能访问组件实例的东西(数据源、函数等)
// 能访问组件视图渲染之后的 DOM 元素
onUpdated(() => {
    console.log('------------------------')
    console.log('onUpdated 数据源发生变化,组件视图重新渲染之后(生命周期钩子)')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})

7、beforeUnmount/onBeforeUnmount

  1. abeforeUnmount:选项式生命周期函数、onBeforeUnmount:组合式生命周期钩子
  2. 组件实例被卸载之前调用
  3. 可访问组件实例东西(数据源、函数、计算属性等)
  4. 可以访问组件视图中的DOM元素

选项式写法:

// 组件在卸载之前
    // 可以访问组件中的数据,函数,自定义的属性等
    // 可访组件视图的 DOM 元素
    beforeUnmount() {
        console.log('----------------------------')
        console.log('beforeUnmount 组件在卸载之前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },

组合式写法:

import { onBeforeUnmount } from 'vue'
// 组件卸载之前
// 能访问组件实例的东西(数据源、函数等)
// 能访问组件视图 DOM 元素
onBeforeUnmount(() => {
    console.log('------------------------')
    console.log('onBeforeUnmount 组件卸载之前(生命周期钩子)')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
}) 

8、unmounted/onUnmounted

  1. unmounted:选项式生命周期函数、onUnmounted:组合式生命周期钩子
  2. 组件实例被卸载之后调用
  3. 可访问组件实例东西(数据源、函数、计算属性等)
  4. 不可以访问组件视图中的DOM元素
  5. 一般在这个生命周期函数里,我们可以手动清理一些副作用,例如计时器、DOM事件监听器或者与服务器的连接

选项式写法:

// 组件已卸载
    // 可以访问组件中的数据,函数,自定义的属性等
    // 不可访组件视图的 DOM 元素
    unmounted(){
        console.log('----------------------------')
        console.log('unmounted 组件已卸载')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log('不能访问组件中的视图DOM元素');
        // console.log(document.getElementById('title').innerHTML)
    }

组合式写法:

import { onUnmounted} from 'vue'
// 组件卸载之后
// 能访问组件实例的东西(数据源、函数等)
// 不能访问组件视图 DOM 元素
onUnmounted(() => {
    console.log('------------------------')
    console.log('onUnmounted 组件卸载之后(生命周期钩子)')
    console.log(age.value)
    showMessage()
    console.log('不能访问组件视图中的 DOM 元素');
    // console.log(document.getElementById('title').innerHTML)
}) 

总结:

Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。

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

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

相关文章

算法学习系列(五):N皇后、数独

目录 引言一、N皇后问题代码实现测试 二、数独问题代码实现测试 引言 这个N皇后问题是很典型的一个递归问题,就是还是要掌握,所谓递归其实就是dfs,一层一层深入下去。数独和N皇后的思路是一样的,只不过一些细节不同而已。 一、N…

使用pyscenedetect进行视频场景切割

1. 简介 在视频剪辑有转场一词:一个视频场景转换到另一个视频场景,场景与场景之间的过渡或转换,就叫做转场。 本篇介绍一个强大的开源工具PySceneDetect,它是一款基于opencv的视频场景切换检测和分析工具,项目地址: h…

探秘 Sass 之路:掌握强大的 CSS 预处理器(上)

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

uni-app 微信小程序之swiper轮播图

1. 实现效果 2. 完成代码 <template><view class"components-home"><view style"margin-top:-50rpx;height: 486rpx; position: relative;margin-bottom: 80rpx;"><image srchttps://xxx.com/img/wccQQP.png modewidthFix classpng …

AI助力智慧农业,基于YOLOv3开发构建农田场景下的庄稼作物、田间杂草智能检测识别系统

智慧农业随着数字化信息化浪潮的演变有了新的定义&#xff0c;在前面的系列博文中&#xff0c;我们从一些现实世界里面的所见所想所感进行了很多对应的实践&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《自建数据集&#xff0c;基于YOLOv7开发构建农田场景下杂草…

Ubuntu系统下使用apt-get安装Redis

记录一下Ubuntu20.04 64位系统下使用apt-get安装Redis 首先检查一下系统是否安装过redis whereis redismywmyw-K84HR:~$ whereis redis redis: mywmyw-K84HR:~$ 更新软件包 sudo apt-get update -y安装redis sudo apt-get install redis-server -ymywmyw-K84HR:~$ sudo apt…

ELasticsearch:什么是语义搜索?

语义搜索定义 语义搜索是一种解释单词和短语含义的搜索引擎技术。 语义搜索的结果将返回与查询含义匹配的内容&#xff0c;而不是与查询中的单词字面匹配的内容。 语义搜索是一组搜索引擎功能&#xff0c;其中包括根据搜索者的意图及其搜索上下文理解单词。 此类搜索旨在通过…

【S32K3环境搭建】-0.1-安装S32 Design Studio for S32 Platform 3.5

目录&#xff08;S32DS安装步骤详细&#xff09; 1 安装S32 Design Studio for S32 Platform 3.5准备工作 2 下载S32 Design Studio for S32 Platform 3.5安装包 2.1 获取S32DS的License许可 3 安装S32 Design Studio for S32 Platform 3.5 4 打开S32 Design Studio for S…

【网络奇缘】- 如何自己动手做一个五类|以太网|RJ45|网络电缆

​ ​ &#x1f308;个人主页: Aileen_0v0&#x1f525;系列专栏: 一见倾心,再见倾城 --- 计算机网络~&#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 本篇文章关于计算机网络的动手小实验---如何自己动手做一个网线&#xff0c; 也是为后面的物理层学习进…

【LabVIEW学习】5.数据通信之TCP协议,控制电脑的一种方式

一。tcp连接以及写数据&#xff08;登录&#xff09; 数据通信--》协议--》TCP 1.tcp连接 创建while循环&#xff0c;中间加入事件结构&#xff0c;创建tcp连接&#xff0c;写入IP地址与端口号 2.写入tcp数据 登录服务器除了要知道IP地址以及端口以外&#xff0c;需要用户名与密…

nodejs+vue+微信小程序+python+PHP在线购票系统的设计与实现-计算机毕业设计推荐

伴随着信息时代的到来&#xff0c;以及不断发展起来的微电子技术&#xff0c;这些都为在线购票带来了很好的发展条件。同时&#xff0c;在线购票的范围不断增大&#xff0c;这就需要有一种既能使用又能使用的、便于使用的、便于使用的系统来对其进行管理。在目前这种大环境下&a…

FairGuard无缝兼容小米澎湃OS、ColorOS 14 、鸿蒙4!

随着移动互联网时代的发展&#xff0c;各大手机厂商为打造生态系统、构建自身的技术壁垒&#xff0c;纷纷投身自研操作系统。 而对于一款游戏安全产品&#xff0c;在不同操作系统下&#xff0c;是否能够无缝兼容并且提供稳定的、高强度的加密保护&#xff0c;成了行业的一大痛…

Kafka中的Partition详解与示例代码

在Apache Kafka中&#xff0c;Partition&#xff08;分区&#xff09;是一个关键的概念。分区的引入使得Kafka能够处理大规模数据&#xff0c;并提供高性能和可伸缩性。本文将深入探讨Kafka中的Partition&#xff0c;包括分区的作用、创建、配置以及一些实际应用中的示例代码。…

C++ day55 判断子序列 不同的子序列

题目1&#xff1a;392 判断子序列 题目链接&#xff1a;判断子序列 对题目的理解 判断字符串s是否为t的子序列 字符串s和字符串t的长度大于等于0&#xff0c;字符串s的长度小于等于字符串t的长度&#xff0c;本题其实和最长公共子序列的那道题很相似&#xff0c;相当于找两…

gitlab高级功能之容器镜像仓库

今天给大家介绍一个gitlab的高级功能 - Container Registry&#xff0c;该功能可以实现docker镜像的仓库功能&#xff0c;将gitlab上的代码仓的代码通过docker构建后并推入到容器仓库中&#xff0c;好处就是无需再额外部署一套docker仓库。 文章目录 1. 参考文档2. Container R…

yolov8添加ca注意力机制

创建文件 coordAtt.py 位置&#xff1a;ultralytics/nn/modules/coordAtt.py ###################### CoordAtt #### start by AI&CV ############################### # https://zhuanlan.zhihu.com/p/655475515 import torch import torch.nn as nn import t…

在Windows11(WSL)中如何迁移Docker

前言&#xff1a; 在Windows 10中Docker是默认安装到WSL中的&#xff0c;而安装到WSL中的任意分发版都是默认放在C盘中的。这样会让我们的C盘资源极度紧张&#xff0c;而且也限制了Docker的镜像数量。 迁移步骤 假设我有一个临时目录“D:\docker”用来存放临时文件&#xff0c;…

【开源】基于Vue和SpringBoot的在线课程教学系统

项目编号&#xff1a; S 014 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S014&#xff0c;文末获取源码。} 项目编号&#xff1a;S014&#xff0c;文末获取源码。 目录 一、摘要1.1 系统介绍1.2 项目录屏 二、研究内容2.1 课程类型管理模块2.2 课程管理模块2…

黑马头条数据管理平台项目总结

今天主要看了该项目的介绍&#xff0c;这个黑马头条数据管理平台项目主要包括登录、用户的权限判断、文章内容列表的筛选和分页、文章的增删查改还有图片和富文本编辑器这几大部分组成&#xff0c;项目配套了素材代码&#xff0c;像资源文件、第三方插件、页面文件夹、工具插件…

【MySQL】表的增删查改

增创建库创建表表插入表更新插入表替换插入查询结果 查全列查找指定列查找查找结果去重where条件查找筛选分页结果 改对查询到的结果进行列值更新 删delete 和 truncate 的区别 增 创建库创建表 create database 库名称;use 进入的库名称;create table 表名称; select * from…