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

相关推荐
m0_7400437321 小时前
父组件 子组件
javascript·vue.js·ecmascript
00后程序员张21 小时前
Fiddler调试工具全面解析 HTTPHTTPS抓包、代理设置与接口测试实战教程
前端·测试工具·ios·小程序·fiddler·uni-app·webview
爱吃无爪鱼21 小时前
05-JavaScript/TypeScript 项目结构完全解析
javascript·react.js·typescript·前端框架·npm·html·sass
k8s-open21 小时前
解决“Argument list too long”错误:curl参数过长的优雅处理方案
linux·前端·chrome·ssh
渴望成为python大神的前端小菜鸟21 小时前
JS宏任务 & 微任务 API 速查表
javascript
CodeSheep21 小时前
裁员为什么先裁技术人员?网友一针见血
前端·后端·程序员
前端小王呀21 小时前
自定义图表相关配置
android·前端·javascript
2501_9159184121 小时前
uniapp iOS 打包和上架流程,一次跨端项目的工程化交付记录
android·ios·小程序·https·uni-app·iphone·webview
chilavert31821 小时前
技术演进中的开发沉思-226 Ajax:前端兼容
javascript·架构
西西学代码21 小时前
flutter---进度条
前端·javascript·flutter