深入理解 Vue 3 的 onLoad 和 onReady 生命周期及相关知识点
深入理解 Vue 3 的 onLoad 和 onReady 生命周期及相关知识点
在 Vue 3 中，生命周期钩子是组件开发的重要组成部分，用于管理组件的创建、挂载、更新和销毁的各个阶段。在基于 Vue 的框架（例如 WeChat 小程序的 Vue 语法糖支持）中，onLoad 和 onReady 也是常见的生命周期钩子。
本文将详细解析这两个生命周期钩子的用途、使用方法，并提供完整示例和最佳实践。
什么是生命周期钩子？
生命周期钩子是指在组件从创建到销毁的过程中，Vue 提供的一系列事件点，允许开发者在特定阶段插入自定义逻辑。在 Vue 3 中，最常用的生命周期钩子包括：
onBeforeMount：组件挂载到 DOM 之前。onMounted：组件挂载到 DOM 之后。onBeforeUpdate：组件数据更新前。onUpdated：组件数据更新后。onBeforeUnmount：组件卸载前。onUnmounted：组件卸载后。
在 WeChat 小程序中，Vue 语法糖支持了类似的生命周期钩子，如 onLoad 和 onReady，专门用于小程序页面的生命周期管理。
onLoad 和 onReady 的含义
在 WeChat 小程序中：
onLoad：页面加载时触发，接收页面的参数。这是处理页面初始化逻辑的主要入口。onReady：页面首次渲染完成后触发，适合执行依赖页面渲染完成的逻辑。
在 Vue 语法糖的支持下，这两个钩子可以通过 Vue 3 的组合式 API 和语法糖写法轻松使用。
onLoad 和 onReady 的对比
| 生命周期钩子 | 触发时机 | 常见用途 |
|---|---|---|
onLoad | 页面首次加载时调用 | 初始化数据、解析路由参数等 |
onReady | 页面首次渲染完成时调用 | 获取 DOM 节点、执行动画等 |
在 Vue 3 中使用 onLoad 和 onReady
以下是一个使用 Vue 语法糖编写的小程序页面示例，展示如何在页面中使用 onLoad 和 onReady。
示例代码
<template>
<view class="container">
<text>{{ message }}</text>
<view id="example" class="box"></view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { onLoad, onReady } from '@dcloudio/uni-app'
const message = ref('页面加载中...')
// 页面加载时
onLoad((query) => {
console.log('页面参数:', query)
message.value = `欢迎访问！页面参数：${JSON.stringify(query)}`
})
// 页面渲染完成时
onReady(() => {
const box = uni.createSelectorQuery().select('#example')
box.boundingClientRect((rect) => {
console.log('box 的位置信息:', rect)
}).exec()
})
// Vue 组合式 API 示例
onMounted(() => {
console.log('Vue 组件挂载完成')
})
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
代码解析
1. onLoad 用法
onLoad 是页面加载的第一个生命周期钩子，适合用于获取路由参数或初始化页面状态。
在代码中：
onLoad((query) => {
console.log('页面参数:', query)
message.value = `欢迎访问！页面参数：${JSON.stringify(query)}`
})
我们通过 onLoad 获取页面的参数 query，并动态设置 message，以便页面加载时展示对应的信息。
2. onReady 用法
onReady 在页面首次渲染完成后触发，可以用来执行一些依赖 DOM 的操作。
在代码中：
onReady(() => {
const box = uni.createSelectorQuery().select('#example')
box.boundingClientRect((rect) => {
console.log('box 的位置信息:', rect)
}).exec()
})
我们使用 uni.createSelectorQuery 获取 DOM 节点的位置信息，这些操作需要等待页面渲染完成。
3. 结合 Vue 组合式 API
同时，我们还可以使用 Vue 的标准组合式 API，如 onMounted，与小程序的生命周期钩子互补。
常见问题和最佳实践
1. 如何处理数据传递？
onLoad 中的 query 参数是页面传递的所有参数，推荐通过路由传参并统一解析。
示例：
onLoad((query) => {
console.log('接收到的参数:', query)
})
2. 如何保证 DOM 操作的安全性？
onReady 是专门为依赖 DOM 操作设计的钩子，避免在 onLoad 中操作 DOM。
总结
onLoad 和 onReady 是小程序中两个关键的生命周期钩子。在 Vue 3 的语法糖支持下，可以更方便地与 Vue 的组合式 API 一起使用，从而实现清晰且高效的页面逻辑。
以下是它们的核心要点：
onLoad：页面加载，适合初始化数据。onReady：页面渲染完成，适合 DOM 操作。
希望通过本文的讲解，能帮助你在实际开发中更好地理解和使用这些生命周期钩子。
如果你觉得本文对你有帮助，请点赞收藏
原文地址：https://blog.csdn.net/2301_79858914/article/details/143894692
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！