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

相关推荐
抹茶冰淇淋几秒前
面对新电脑,前端开发者需要进行哪些初始化配置
前端·github
HIT_Weston几秒前
55、【Ubuntu】【Gitlab】拉出内网 Web 服务:http.server 单/多线程分析(七)
前端·http·gitlab
Watermelo6172 分钟前
如何优雅地导出 VS Code 项目目录结构
前端·javascript·vue.js·vscode·算法·性能优化·node.js
艾小码3 分钟前
前端性能加速器:Vue Router懒加载与组件分包的极致优化
前端·javascript·vue.js
Moment4 分钟前
使用 Tiptap 编写一个富文本编辑器为什么对很多人来说很难 🤔🤔🤔
前端·javascript·github
抹茶冰淇淋1 小时前
降级系统后,2019年的Mac电脑重获新生
前端
雪碧聊技术2 小时前
前端VUE3项目部署到linux服务器(CentOS 7)
前端·linux部署vue3项目
酒尘&8 小时前
JS数组不止Array!索引集合类全面解析
开发语言·前端·javascript·学习·js
学历真的很重要8 小时前
VsCode+Roo Code+Gemini 2.5 Pro+Gemini Balance AI辅助编程环境搭建(理论上通过多个Api Key负载均衡达到无限免费Gemini 2.5 Pro)
前端·人工智能·vscode·后端·语言模型·负载均衡·ai编程
用户47949283569159 小时前
"讲讲原型链" —— 面试官最爱问的 JavaScript 基础
前端·javascript·面试