深圳软件公司招聘,网站怎么优化,做网站空间百度云和阿里云区别,现在建网站做推广能赚钱吗一、vue2生命周期 Vue2 的生命周期钩子函数分为 4 个阶段#xff1a;创建、挂载、更新、销毁。 1. 创建阶段 beforeCreate#xff1a;实例初始化之后#xff0c;数据观测和事件配置之前。 created#xff1a;实例创建完成#xff0c;数据观测和事件配置已完成#xff0c…一、vue2生命周期 Vue2 的生命周期钩子函数分为 4 个阶段创建、挂载、更新、销毁。 1. 创建阶段 beforeCreate实例初始化之后数据观测和事件配置之前。 created实例创建完成数据观测和事件配置已完成但 DOM 未生成。
2. 挂载阶段 beforeMount模板编译完成但未挂载到 DOM。 mounted实例挂载到 DOM 后调用DOM 已生成。
3. 更新阶段 beforeUpdate数据更新时调用DOM 未重新渲染。 updated数据更新后DOM 重新渲染完成。
4. 销毁阶段 beforeDestroy实例销毁之前调用此时实例仍可用。 destroyed实例销毁后调用所有事件监听器和子实例被移除。
export default {beforeMount() {console.log(beforeMount: 模板编译完成DOM 未挂载);},mounted() {console.log(mounted: DOM 已挂载);}
}
二、vue3生命周期 Vue3 的生命周期与 Vue2 类似但有一些变化 Vue3 使用 Composition API生命周期钩子函数可以通过 setup 函数访问。 部分钩子函数名称变化并新增了一些钩子。 1. 创建阶段 setup替代 beforeCreate 和 created在组件初始化时调用。 onBeforeMount替代 beforeMount。 onMounted替代 mounted。
2. 更新阶段 onBeforeUpdate替代 beforeUpdate。 onUpdated替代 updated。
3. 销毁阶段 onBeforeUnmount替代 beforeDestroy。 onUnmounted替代 destroyed。
4. 新增钩子 onActivated被 keep-alive 缓存的组件激活时调用。 onDeactivated被 keep-alive 缓存的组件停用时调用。 onErrorCaptured捕获子孙组件的错误时调用。
import { onBeforeMount, onMounted } from vue;export default {setup() {console.log(setup: 组件初始化);onBeforeMount(() {console.log(onBeforeMount: DOM 未挂载);});onMounted(() {console.log(onMounted: DOM 已挂载);});}
}
三、vue2和vue3生命周期的区别
生命周期Vue2Vue3说明创建阶段beforeCreatesetupVue3 使用 setup 替代 beforeCreate 和 created挂载阶段beforeMountonBeforeMount钩子函数名称变化挂载完成mountedonMounted钩子函数名称变化更新阶段beforeUpdateonBeforeUpdate钩子函数名称变化更新完成updatedonUpdated钩子函数名称变化销毁阶段beforeDestroyonBeforeUnmount钩子函数名称变化销毁完成destroyedonUnmounted钩子函数名称变化缓存组件激活无onActivatedVue3 新增缓存组件停用无onDeactivatedVue3 新增错误捕获无onErrorCapturedVue3 新增
四、uni-app生命周期 UniApp 的生命周期分为 应用生命周期、页面生命周期 和 组件生命周期。 官网链接页面 | uni-app官网 1、应用的生命周期重点是前面几个 onLaunch应用初始化完成时触发全局只触发一次。 onShow应用启动或从后台进入前台时触发。 onHide应用从前台进入后台时触发。 onError应用发生脚本错误时触发。 onUniNViewMessage监听 nvue 页面发送的消息。 onUnhandledRejection监听未处理的 Promise 拒绝事件。 onPageNotFound页面不存在时触发。 onThemeChange监听系统主题变化。
// 在 App.vue 中定义应用生命周期钩子
export default {onLaunch(options) {console.log(App Launch, options);},onShow(options) {console.log(App Show, options);},onHide() {console.log(App Hide);},onError(err) {console.error(App Error, err);}
}
2、页面的生命周期前五个是重点
页面生命周期是指单个页面的加载、显示、隐藏和卸载的过程。Uniapp 提供了以下页面生命周期钩子函数 onLoad: 页面加载时触发一个页面只会调用一次参数为页面传递的参数。适合在页面加载时获取参数并初始化数据。 onShow: 页面显示/切入前台时触发。刷新也会触发。 onReady: 页面初次渲染完成时触发一个页面只会调用一次。 onHide: 页面隐藏/切入后台时触发。 onUnload: 页面卸载时触发。 onPullDownRefresh: 页面下拉刷新时触发。 onReachBottom: 页面上拉触底时触发。 onPageScroll: 页面滚动时触发。 onResize: 页面尺寸改变时触发如屏幕旋转。 onTabItemTap: 点击 tab 时触发参数为当前 tab 的信息。
// 在页面中定义页面生命周期钩子
export default {onLoad(options) {console.log(Page Load, options);},onShow() {console.log(Page Show);},onReady() {console.log(Page Ready);},onHide() {console.log(Page Hide);},onUnload() {console.log(Page Unload);}
}
注意onLoad和onReady的区别 onload 触发时机较晚需要等待页面及其所有元素包括图片、视频等完全加载完毕后才会触发。适用于需要在页面所有资源都加载完毕后才执行的操作如计算页面元素的大小、位置等属性。在传统的网页开发中onload事件经常被用来确保页面资源已经加载完毕后再执行某些操作。使用场景如果你需要确保页面上的所有元素都已经加载完毕再发起请求比如获取某些依赖于页面内容的动态数据那么onload是一个合适的选择。这样可以避免因为页面元素还未加载完毕而导致的请求错误或数据不准确。 onready 触发时机较早当页面DOM结构绘制完毕后就会触发。适用于需要在页面DOM结构就绪后立即执行的操作如初始化UI组件、绑定事件监听器等。在一些现代前端框架如Vue、React等中通常会有类似的生命周期钩子如mounted来替代传统的onready事件。使用场景如果你需要在页面DOM结构就绪后立即发起请求而不必等待所有资源都加载完毕那么onready更为合适。这通常用于初始化页面上的某些功能或组件这些功能或组件可能不依赖于页面上的所有资源。 3、组件的生命周期 UniApp 的组件生命周期与 Vue2 或 Vue3 的生命周期一致如果使用的是vue2则使用vue2的生命周期使用的vue3则使用vue3生命周期。 Vue2beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。 Vue3setup、onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted。 4、为什么应用和页面生命周期都包含 onShow 和 onHide 应用生命周期 的 onShow 和 onHide 是针对整个应用的关注的是应用的整体状态如启动、切换到前台/后台。 页面生命周期 的 onShow 和 onHide 是针对单个页面的关注的是页面的显示和隐藏状态如页面跳转、返回。
5、两者生命周期的区别
特性应用生命周期 (App.vue)页面生命周期 (页面 .vue)作用范围整个应用单个页面触发时机应用启动、切换到前台/后台页面显示、隐藏使用场景全局逻辑如登录状态检查页面逻辑如刷新数据
五、总结 Vue2 和 Vue3 的生命周期基本一致但 Vue3 引入了 Composition API部分钩子函数名称变化并新增了一些钩子。 UniApp 的生命周期分为应用、页面和组件三部分应用和页面的生命周期是 UniApp 特有的组件的生命周期与 Vue 一致。 在实际开发中根据框架版本Vue2/Vue3和平台UniApp选择合适的生命周期钩子函数。 发起请求的时机 页面加载时onLoad 页面显示时onShow 下拉刷新时onPullDownRefresh 上拉加载更多时onReachBottom 组件创建时created 或 mounted
