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

相关推荐
孙桂月几秒前
ES6相关操作(2)
前端·javascript·es6
遇见很ok几秒前
js中 ES6 新特性详解
开发语言·javascript·es6
陈浩源同学几秒前
学习 TypeScript 栈和队列数据结构
前端·算法
我这一生如履薄冰~2 分钟前
简单封装一个websocket构造函数
前端·javascript·websocket
fangcaojushi3 分钟前
解决webpack5.54打包图片及图标的问题
前端·vue.js
海盗强3 分钟前
Webpack打包优化
前端·webpack·node.js
星之卡比*5 分钟前
前端面试题---vite和webpack的区别
前端·面试
^^为欢几何^^10 分钟前
npm、pnpm和yarn有什么区别
前端·npm·node.js
前端菜鸟日常17 分钟前
vue2和vue3的按需引入的详细对比通俗易懂
javascript·vue.js·ecmascript
AC-PEACE32 分钟前
Vue 中 MVVM、MVC 和 MVP 模式的区别
前端·vue.js·mvc