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

相关推荐
weixin_397574091 分钟前
AgentRAG与ReAct推理链:从检索增强到推理增强
前端·react.js·前端框架
想要狠赚笔的小燕12 分钟前
vue项目的入口文件是什么 main.js还是index.html,他俩有啥区别
前端·javascript
Jiude14 分钟前
AI面对真机调试也束手无策?我将方法论形成了一套SKILL 🛠️🤖
前端·后端·测试
之歆26 分钟前
Day02_ES6+ 核心特性深度解析:现代 JavaScript 开发的基石
前端·javascript·es6
问心无愧051327 分钟前
ctf show web入门71
android·前端·笔记
light blue bird36 分钟前
支组汇总主子节点工序路径图表
前端·jvm·.net·桌面端·gdi绘图
小KK_1 小时前
新手必看篇——JS类型判断
前端·javascript
小妖6661 小时前
console.log 显示内容不全怎么办
javascript·js·console.log
小小高不懂写代码1 小时前
Vibe Coding时代的自我鞭策
前端·人工智能
喵个咪1 小时前
基于 Nuxt 4 的现代 Headless CMS 前端:架构深度解析与二次开发指南
前端·vue.js·nuxt.js