网站维护 北京,国家信息公示系统入口,网站怎么备案在哪里,个人社保缴费比例一、什么是生命周期#xff1f; 生命周期有多重叫法#xff0c;有叫生命周期函数的#xff0c;也有叫生命周期钩子的#xff0c;还有钩子函数的#xff0c;其实都是代表#xff0c;在 Vue 实例创建、更新和销毁的不同阶段触发的一组钩子函数#xff0c;这些生命周期函数…一、什么是生命周期 生命周期有多重叫法有叫生命周期函数的也有叫生命周期钩子的还有钩子函数的其实都是代表在 Vue 实例创建、更新和销毁的不同阶段触发的一组钩子函数这些生命周期函数允许开发者在不同阶段对 Vue 实例进行操作以便执行特定的逻辑或清理工作。 生命周期主要包含以下四个阶段创建、挂载、更新、销毁。 好比一款手机创建拿到全新一款手机、挂载安装各种软件、更新系统或者软件升级、销毁丢弃手机 二、Vue3中的生命周期函数
官方生命周期函数地址
setup()是在beforeCreate和created之前运行的所以可以用setup代替这两个钩子函数。onBeforeMount() : 已经完成了模板的编译但是组件还未挂载到DOM上的函数。onMounted() : 组件挂载到DOM完成后执行的函数。onBeforeUpdate(): 组件更新之前执行的函数。onUpdated(): 由于数据更改导致的虚拟 DOM 重新渲染和打补丁在这之后会调用该函数。onBeforeUnmount(): 在组件实例被卸载之前调用。onUnmounted(): 组件卸载完成后执行的函数onActivated(): 若组件实例是 缓存树的一部分当组件被插入到 DOM 中时调用。onDeactivated(): 若组件实例是 缓存树的一部分当组件从 DOM 中被移除时调用。onErrorCaptured(): 在捕获了后代组件传递的错误时调用。
注意在uniapp组件中onBeforeUpdate、onUpdated、onActivated、onDeactivatedH5支持小程序无法使用。 三、Vue2与Vue3的对比 四、uniapp中的页面生命周期函数 uniapp页面生命周期函数与 Vue.js 的生命周期函数有所不同因为 uni-app 是基于 Vue.js 的跨平台应用框架因此它具有自己特定的生命周期函数。 可以在这些生命周期函数中编写相应的逻辑代码以便在不同阶段对页面进行初始化、展示、隐藏和卸载时执行特定的操作。 在开发uniapp Vue3版本的时候不能像vue2的选项式API一样可以直接使用onLoad、onShow等在组合式API中需要先从“dcloudio/uni-app”模块中导入才可以。
script setup
import {onLoad,onReady} from dcloudio/uni-app
/scriptonLoad页面加载时触发可以在此生命周期函数中进行页面初始化操作。onShow页面显示时触发可以在此生命周期函数中进行页面展示相关的操作。onReady页面初次渲染完成时触发可以在此生命周期函数中进行页面渲染完成后的操作。onHide页面隐藏时触发可以在此生命周期函数中进行页面隐藏相关的操作。onUnload页面卸载时触发可以在此生命周期函数中进行页面卸载相关的操作。
其他常用的生命周期可以看官方发文档页面生命周期函数
五、uniapp中组件生命周期函数和页面生命周期函数的执行顺序
不包含组件的页面
onLoad onShow onReady
包含组件的页面
onLoad onShow onBeforeMount onReady onMounted
