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

相关推荐
烛阴2 小时前
解锁 TypeScript 的元编程魔法:从 `extends` 到 `infer` 的条件类型之旅
前端·javascript·typescript
前端开发爱好者2 小时前
弃用 ESLint + Prettier!快 35 倍的 AI 格式化神器!
前端·javascript·vue.js
wayhome在哪2 小时前
Cropper.js 轻松拿捏前端裁剪🤞
javascript·canvas·设计
&白帝&2 小时前
vue2和vue3的对比
javascript·vue.js·ecmascript
江东大都督周总2 小时前
rabbitmq集群
javascript·rabbitmq·ruby
vivi_and_qiao3 小时前
HTML的form表单
java·前端·html
江湖行骗老中医3 小时前
uniapp 引入使用u-view 完整步骤,u-view 样式不生效
uni-app
雪芽蓝域zzs3 小时前
uniapp 页面favicon.ico文件不存在提示404问题解决
uni-app
一嘴一个橘子3 小时前
uniapp 顶部tab + 占满剩余高度的内容区域swiper
javascript·uni-app
睡美人的小仙女1273 小时前
在 UniApp 中,实现下拉刷新
uni-app