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

在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是它隐藏即可。

相关推荐
IT枫斗者43 分钟前
IntelliJ IDEA 2025.3史诗级更新:统一发行版+Spring Boot 4支持,这更新太香了!
java·开发语言·前端·javascript·spring boot·后端·intellij-idea
N***p3651 小时前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
NGC_66111 小时前
二分查找算法
java·javascript·算法
享誉霸王2 小时前
15、告别混乱!Vue3复杂项目的规范搭建与基础库封装实战
前端·javascript·vue.js·前端框架·json·firefox·html5
a1117762 小时前
飞机躲避炸弹 网页游戏
前端·开源·html·threejs
夏乌_Wx3 小时前
mybash:简易 Shell 实现的设计思路与核心模块解析
linux·服务器·前端
滕青山3 小时前
URL编码/解码 核心JS实现
前端·javascript·vue.js
有马贵将3 小时前
【3】前端手撕-深浅拷贝
javascript
菜鸟小芯4 小时前
【GLM-5 陪练式前端新手入门】第五篇:响应式适配 —— 让个人主页 “见机行事”
前端·人工智能
无名之逆5 小时前
你可能不需要WebSocket-服务器发送事件的简单力量
java·开发语言·前端·后端·计算机·rust·编程