uniapp生命周期vue生命周期有何异同?
uni-app 是基于 Vue.js 开发的,其生命周期与 Vue 生命周期有一定的关联和区别,下面为你详细介绍:
相同点
本质关联:uni-app 基于 Vue.js 开发,所以 uni-app 组件的生命周期与 Vue 标准组件的生命周期相同,都支持 Vue 的模板语法、指令、组件、生命周期钩子函数等,也可以使用 vue 的数据绑定、计算属性、方法、生命周期钩子等 。
不同点
- 生命周期类型不同
uni-app:有应用生命周期、页面生命周期和类似 Vue 的组件生命周期。其中,应用生命周期仅在 App.vue 中监听,用于监听 uni-app 应用的全局状态,如 onLaunch、onShow、onHide 等;页面生命周期用于监听页面的加载、显示、隐藏等状态,如 onLoad、onShow、onReady 等 。
Vue:主要是组件的生命周期,用于管理组件从创建到销毁的整个过程,如 beforeCreate、created、beforeMount、mounted 等 。 - 部分钩子函数的对应关系和功能差异
uni-app 生命周期 功能说明 Vue 生命周期 功能说明 对应关系
onLoad 监听页面加载,其参数为上个页面传递的数据,用于页面传参 created 实例被创建之后执行代码,可进行数据的初始化操作 created 可替换为 onLoad
onReady 监听页面初次渲染完成 mounted 实例被挂载完成后执行代码 mounted 可替换为 onReady
onShow 监听页面显示,页面每次出现在屏幕上都触发 - - 无直接对应
onHide 监听页面隐藏 - - 无直接对应
onUnload 监听页面卸载 beforeDestroy、destroyed 在解除绑定、销毁子组件以及事件监听器前后执行代码 有一定关联
总体而言,uni-app 在 Vue 生命周期的基础上,增加了应用和页面层面的生命周期钩子,以满足跨平台开发中对应用和页面状态管理的需求。