onReady 在页面初次渲染完成、DOM 已就绪时触发，仅执行一次，且在 onLoad 和 onShow 之后；它表示 Vue 实例挂载完毕、模板已转为真实 DOM，但不保证页面可见或数据加载完成。
onReady 什么时候触发？
onReady 是页面初次渲染完成、DOM 已就绪时触发的钩子，它只执行一次，且一定在 onLoad 和 onShow 之后。注意：它不等于“页面显示”，也不代表“数据加载完成”，而是 Vue 实例挂载完毕、所有模板已解析为真实 DOM 的那一刻。
哪些操作必须放在 onReady 里？
以下几类逻辑如果提前到 onLoad 或 onShow 中执行，大概率会失败或不稳定：
- 调用依赖 DOM 节点的 API，比如
uni.createSelectorQuery()查询元素尺寸 - 初始化需要真实 DOM 的第三方库（如 ECharts、Swiper、Canvas 绘图）
- 绑定原生事件监听器（如
document.addEventListener('scroll', ...)） - 手动触发 DOM 动画（如
element.animate(...)）或读取offsetHeight等布局属性
示例：
onReady() {
// ✅ 安全：此时 this.$refs.chart 已存在且可被查询
const query = uni.createSelectorQuery().in(this)
query.select('#myChart').fields({ node: true, size: true }).exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
// 启动 ECharts 渲染...
})
}
常见错误：把 onReady 当成 onShow 用
现象：页面从后台切回前台时，onReady 不再触发，导致图表空白、动画卡住、滚动监听失效。
原因：onReady 是“一次性渲染就绪”信号，不是“每次显示都就绪”。如果你需要在每次页面可见时重置状态，应该结合 onShow + 标志位或手动重建：
- 不要在
onShow里重复调用createSelectorQuery—— 节点还在，但可能尺寸已变，需重新查 - 如果用了 Canvas 或 WebGL，
onShow中应调用canvas.width = canvas.width清空并重绘 - 定时器、轮询等应在
onHide中暂停，onShow中恢复，而非依赖onReady
Vue 3 setup 语法下怎么写？
在 <script setup></script> 中，不能直接导出 onReady 函数，必须从 @dcloudio/uni-app 显式导入：
import { onReady } from '@dcloudio/uni-app'
onReady(() => {
console.log('DOM 已挂载，可安全操作节点')
// 此处写你的初始化逻辑
})
注意：不要在 onReady 回调里访问未响应式声明的 ref 或 reactive 数据——它们虽已定义，但若在 onLoad 前未赋值，仍可能是 undefined。
最常被忽略的一点：onReady 触发时，页面未必“可视”——比如被 v-if 隐藏的区域、尚未展开的折叠面板，其内部 DOM 可能还未创建。真要操作某块动态内容，得等它真正 mounted，而不是只信 onReady。
