news 2026/4/24 10:49:25

Uniapp+Vue3+Ts 实战:巧用双script标签破解globalData共享与生命周期执行难题

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Uniapp+Vue3+Ts 实战:巧用双script标签破解globalData共享与生命周期执行难题

1. 当Uniapp遇上Vue3+Ts:globalData共享的困境

最近在帮团队升级Uniapp项目到Vue3+TypeScript时,遇到了一个典型问题:App.vue中原本通过export default导出的globalData全局变量,在改用<script setup>语法糖后突然失效了。其他页面通过getApp()获取全局变量时,控制台不断报出"undefined"错误,这直接影响了项目中十几个页面的正常运行。

问题的本质在于<script setup>的设计理念。这个语法糖确实让代码更简洁了,但它彻底改变了组件的导出方式——在setup语法糖中,所有顶层绑定都会自动暴露给模板,因此不再需要(也不允许)使用export default。这就导致我们既想保留Vue3的新特性,又需要兼容老项目中的全局变量体系时,陷入了两难境地。

更棘手的是生命周期函数的执行问题。在原来的Vue2模式中,onLaunch等应用生命周期函数都是直接写在export default对象里的。现在如果全部迁移到setup语法糖中,虽然可以用onLaunch(()=>{})的写法,但实际测试发现某些情况下执行顺序会出现混乱,特别是当页面快速跳转时,可能导致全局变量还未初始化就被调用的情况。

2. 双script标签的魔法:兼容新旧两种模式

经过多次尝试,我发现最优雅的解决方案是同时使用两种script标签。具体做法是在App.vue中保留传统的<script lang="ts">块用于导出globalData,同时新增<script setup lang="ts">块来编写组合式API代码。这种混合写法完美解决了我们的核心需求:

<!-- 处理组合式API和生命周期 --> <script setup lang="ts"> import { onLaunch } from '@dcloudio/uni-app' onLaunch(() => { console.log('组合式API的onLaunch') // 初始化操作... }) </script> <!-- 处理全局变量和传统选项 --> <script lang="ts"> export default { globalData: { userToken: '', systemInfo: {} as UniApp.GetSystemInfoResult }, onLaunch() { console.log('选项式的onLaunch') // 获取系统信息 this.globalData.systemInfo = uni.getSystemInfoSync() } } </script>

这里有个关键细节:两个script标签都必须声明相同的语言类型。如果一个是lang="ts"而另一个没有声明,Vite会直接报错"[plugin:vite:vue]

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/24 10:47:19

大众点评爬虫终极指南:3步搞定餐饮数据采集与动态字体破解

大众点评爬虫终极指南&#xff1a;3步搞定餐饮数据采集与动态字体破解 【免费下载链接】dianping_spider 大众点评爬虫&#xff08;全站可爬&#xff0c;解决动态字体加密&#xff0c;非OCR&#xff09;。持续更新 项目地址: https://gitcode.com/gh_mirrors/di/dianping_spi…

作者头像 李华
网站建设 2026/4/24 10:47:18

基于Web服务的电话号码地理定位技术实现方案

基于Web服务的电话号码地理定位技术实现方案 【免费下载链接】location-to-phone-number This a project to search a location of a specified phone number, and locate the map to the phone number location. 项目地址: https://gitcode.com/gh_mirrors/lo/location-to-p…

作者头像 李华
网站建设 2026/4/24 10:45:19

【Qt 实战指南】QWidget窗口属性与qrc资源管理:从基础配置到项目实战

1. QWidget窗口属性基础&#xff1a;从零开始配置窗口外观 接手一个遗留的Qt项目时&#xff0c;最先映入眼帘的往往是窗口的外观表现。作为用户与程序交互的第一道门户&#xff0c;窗口标题和图标不仅是视觉标识&#xff0c;更是用户体验的重要组成部分。让我们从最基础的windo…

作者头像 李华
网站建设 2026/4/24 10:43:12

WaveTools终极指南:5分钟解锁鸣潮120帧与抽卡数据分析

WaveTools终极指南&#xff1a;5分钟解锁鸣潮120帧与抽卡数据分析 【免费下载链接】WaveTools &#x1f9f0;鸣潮工具箱 项目地址: https://gitcode.com/gh_mirrors/wa/WaveTools 想让《鸣潮》在电脑上流畅运行120帧&#xff0c;同时掌握抽卡概率规律吗&#xff1f;Wave…

作者头像 李华