年年项目 —— Vue3开发_vue3 onready-CSDN博客

本文链接：https://blog.csdn.net/zk_html/article/details/129095818

文章探讨了在uniapp中如何处理Promise对象，特别是在vue3环境下利用async/await和ref实现响应式数据绑定。同时，解释了uniapp中如何适配vue3的新特性，如弃用onLoad，改用onShow和onReady。此外，还提及了在canvas转换图片时遇到的宽高自适应问题及其解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

一、接口调用时返回 promise 对象，如何接受数据？如何将数据实现响应式并交出去？

分析原因：使用 async 和 await 解析 promise 对象，但是如果直接在 setup 中调用接口，会得不到接口返回的数据，因为 promise 是异步进行加载，所以 return 执行完才会执行接口函数。

解决办法：直接在 setup 中定义一个数据来存储得到的数据，注意这个数据一定不能是简单的单层对象，否则在赋值的时候会发生对象的地址替换，无法实现响应式。

二、uniapp 中如何使用 vue3 的一些语法？

分析原因：是因为 vue3 中出现了一些新的特性。注意onLoad 相当于 created ，已废弃，被setup取代

解决办法：

import { onShow,onReady } from '@dcloudio/uni-app'  
import {ref} from 'vue'  
    export default {  
        setup(){  
            const title = ref(1)  
            const next = ()=>{  
                console.log('我是一个方法')  
            }  
            const add= ()=>{  
                title.value++  
            }  
            onShow(()=>{  
                console.log('onShow1');  
            })  
            onReady(()=>{  
                console.log('onReady');  
            })  
            return{  
                title,  
                next,  
                add  
            }  
        }  
    }

三、将图片转为 Canvas 时，宽高不能自适应的问题

canvas画图随记 | 微信开放社区canvas画图时是否遇到了和我一样的问题？有的话进来看看吧，希望对你有的小小的帮助。https://developers.weixin.qq.com/community/develop/article/doc/00082c0fb1ca60e45748d35ac51413