【Uniapp-Vue3】组合式API中的组件的生命周期函数(钩子函数)

devtools/2025/1/17 1:20:11/

在Uniapp中生命周期函数用得较多的是onMounted和onUnmounted。

一、onMounted函数

如果我们想要获得DOM元素,就需要给DOM标签上添加ref属性,并定义一个相同属性名的变量。

但是我们输出这个DOM元素为NULL 

 如果我们使用onMounted就能获得到DOM元素,使用方式如下:

import {onMounted} from "vue";

onMounted(()=>{...})

 

这时候我们就能成功输出DOM元素。 

二、onUnmounted函数 

当我们在对组件进行销毁就会触发该函数,使用方法如下:

1. 子组件中配置

import {onUnmounted} from 'vue';

onUnmounted(()=>{...})

2. 父组件中配置 

想要实现组件的销毁非常简单,只需要使用v-if是它隐藏即可。


http://www.ppmy.cn/devtools/151129.html

相关文章

OpenCV基于均值漂移算法(pyrMeanShiftFiltering)的水彩画特效

1、均值漂移算法原理 pyrMeanShiftFiltering算法结合了均值迁移(Mean Shift)算法和图像金字塔(Image Pyramid)的概念,用于图像分割和平滑处理。以下是该算法的详细原理: 1.1 、均值迁移(Mean …

Java并发编程——线程池(基础,使用,拒绝策略,命名,提交方式,状态)

文章目录 线程池🏊线程池的好处👍线程池的创建🏗️线程池(ThreadPoolExecutor)常见参数🔢处理任务流程🔃拒绝策略⭐使用数据库任务表来自定义拒绝策略 线程池中两种提交方式线程池命名♂️♀️线程池状态 线程池&#…

状态模式详解与应用

状态模式(State Pattern),是一种行为型设计模式。它允许一个对象在其内部状态改变时改变它的行为,使得对象看起来似乎修改了它的类。通过将不同的行为封装在不同的状态类中,状态模式可以避免大量的条件判断语句&#x…

cursor重构谷粒商城01——为何要重构谷粒商城

前言:这个系列将使用最前沿的cursor作为辅助编程工具,来快速开发一些基础的编程项目。目的是为了在真实项目中,帮助初级程序员快速进阶,以最快的速度,效率,快速进阶到中高阶程序员。 本项目将基于谷粒商城…

开源临床试验软件OpenClinica的安装

本文是为帮网友 A萤火虫 解决安装问题做的记录; 简介 什么是 OpenClinica ? OpenClinica 是世界上第一个商业开源临床试验软件,主要用于电子数据捕获(EDC)和临床数据管理(CDM)。它的设计旨在优…

34_Lua概述与环境安装指南

从这个模块开始带领带领大家来学习Lua相关的知识。有小伙伴可能会问了问什么要学习Lua?因为在后续的模块中我们需要写Redis脚本、Web开发中编写Nginx脚本等,这些都需要通过Lua语言来实现,因此对Lua的语法我们需要简单了解和掌握必要的知识。 1 Lua概述 1.1 Lua介绍 Lua诞…

如何使用wireshark 解密TLS-SSL报文

目录 前言 原理 操作 前言 现在网站都是https 或者 很多站点都支持 http2。这些站点为了保证数据的安全都通过TLS/SSL 加密过,用wireshark 并不能很好的去解析报文,我们就需要用wireshark去解密这些报文。我主要讲解下mac 在 chrome 怎么配置的&…

【Go】Go Gin框架初识(一)

1. 什么是Gin框架 Gin框架:是一个由 Golang 语言开发的 web 框架,能够极大提高开发 web 应用的效率! 1.1 什么是web框架 web框架体系图(前后端不分离)如下图所示: 从上图中我们可以发现一个Web框架最重要…