vue,小程序,uni-app的生命周期

在Vue、小程序(以微信小程序为例)和Uni-app中,生命周期的概念非常关键,它们帮助开发者理解组件或页面从创建到销毁的整个过程,并在适当的时候执行特定的代码。下面分别介绍这三个框架/平台的生命周期:

Vue 的生命周期

Vue 组件的生命周期主要指的是组件从创建到销毁的一系列过程。Vue 2.x 和 Vue 3.x 在生命周期上有所不同,但大体上可以分为以下几个阶段:

  • beforeCreate:在实例初始化之后,数据观测(data observer)和event/watcher 事件配置之前被调用。
  • created :实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
  • beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
  • mounted:el 被新创建的 vm.el替换,并挂载到实例上去之后调用该钩子。如果根实例挂载了一个文档内元素,当mounted被调用时vm.el 也在文档内。
  • beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
  • updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用这个钩子。当这个钩子被调用时,组件 DOM 已经更新,所以现在可以执行依赖于 DOM 的操作。但是要避免更改状态,因为这可能会导致无限循环的更新。
  • beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
  • destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

Vue 3.x 中,beforeDestroydestroyed 被重命名为 beforeUnmountunmounted,以更好地反映它们的目的。

小程序的生命周期

小程序的生命周期主要包括页面生命周期和全局生命周期(如App的生命周期)。以微信小程序为例:

  • 页面生命周期
    • onLoad:页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。
    • onShow:页面显示/切入前台时触发。
    • onReady:页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
    • onHide:页面隐藏/切入后台时触发。
    • onUnload:页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时。
  • 全局生命周期App):
    • onLaunch:当小程序初始化完成时,会触发 onLaunch(全局只触发一次)。
    • onShow:当小程序启动,或从后台进入前台显示,会触发 onShow。
    • onHide:当小程序从前台进入后台,会触发 onHide。
    • onError:当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息。

Uni-app 的生命周期

Uni-app 的生命周期同时包含了 Vue 和小程序的生命周期概念,因为它旨在编写一次代码,然后发布到多个平台(包括小程序、H5、App等)。Uni-app 的页面和组件生命周期与 Vue 非常相似,但请注意,Uni-app 还会根据目标平台(如微信小程序)调整或添加一些特定的生命周期钩子。

对于页面来说,Uni-app 支持 Vue 的生命周期钩子,如 onLoadonShowonReadyonHideonUnload 等,并且在编译到小程序时,这些钩子会映射到对应小程序的生命周期方法上。

总的来说,虽然 Vue、小程序和 Uni-app 在生命周期的具体实现上有所不同,但它们都遵循了类似的模式,帮助开发者在组件或页面的不同阶段执行相应的代码。

相关推荐
万岳科技系统开发36 分钟前
教育培训小程序搭建实战:打造一体化教学服务平台
小程序
一 乐1 小时前
幼儿园管理系统|基于springboot + vue幼儿园管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·幼儿园管理系统
云水一下1 小时前
Vue.js从零到精通系列(七):高级特性实战——Teleport、异步组件、自定义指令与TypeScript深度结合
前端·vue.js·typescript
qq4356947011 小时前
Vue05
前端·vue.js
英勇无比的消炎药1 小时前
收藏备用TinyVue开发高频踩坑问题合集
vue.js
英勇无比的消炎药1 小时前
体积瘦身TinyVue打包优化与按需加载实践
vue.js·前端工程化
一秒公司1 小时前
网站、小程序与APP备案流程及周期详解(2026版)
小程序
英勇无比的消炎药2 小时前
一套代码多端运行TinyVue响应式开发
vue.js·响应式设计
SwJieJie2 小时前
Webpack vs Vite 构建工程化实战(Vue 项目深度解析)
前端·vue.js·webpack·node.js
云水一下2 小时前
Vue.js从零到精通系列(八):项目实战——构建一个完整的电商后台管理系统
前端·javascript·vue.js