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

相关推荐
老王以为5 分钟前
前端重生之 - 前端视角下的 Python
前端·后端·python
饭后一颗花生米16 分钟前
2026 AI加持下前端学习路线:从入门到进阶,高效突破核心竞争力
前端·人工智能·学习
五号厂房17 分钟前
TypeScript 类型导入详解:import type 与 import {type}
前端
果然_30 分钟前
为什么你的 PR 总是多出一堆奇怪的 commit?90% 的人都踩过这个 Git 坑
前端·git
xpyjs33 分钟前
零依赖、链式调用、可变对象:重新设计 JavaScript 颜色处理体验
前端
WayneYang35 分钟前
Node.js 全栈知识点详细整理(含代码示例 + 前端结合实战)
前端·node.js
土拨鼠爱coding37 分钟前
Chrome插件 - DIY Theme
前端·chrome
小赵同学WoW37 分钟前
CSS作用域穿透选择器
前端·css
GreenTea1 小时前
Deep Dive into Claude Code:源码泄漏引发的AI Agent架构全解析
前端·人工智能·后端
RePeaT1 小时前
【Next.js】基础知识速查
前端·react.js·next.js