uni-app script setup支付宝小程序中无法使用ref在生命周期函数下

示例代码：

import { onLoad, onShow, onReady } from "@dcloudio/uni-app";  
import {reactive} from 'vue';  

const data = reactive({  
    tShow: false  
})  

onReady(() => {  
    setTimeout(() => {  
        data.tShow = true;  
    }, 1000);  
})

操作步骤：

打开示例工程运行至支付宝小程序

预期结果：

ref不报错

实际结果：

ref报错未定义

bug描述：

vue3环境在使用script setup组合式API下，如果引入uniapp生命周期函数就会导致自定义组件ref无法使用

bug示例

信息项	内容
产品分类	uniapp/小程序/阿里
PC开发环境操作系统	Mac
PC开发环境操作系统版本号	macOS Monterey 12.0.1
HBuilderX类型	Alpha
HBuilderX版本号	3.4.13
第三方开发者工具版本号	3.0.1
基础库版本号	2.0
项目创建方式	HBuilderX

vueper 1楼•14 天前

在 uni-app 中使用 script setup 语法时，如果你在支付宝小程序中遇到 ref 在生命周期函数下无法使用的问题，可能是由于支付宝小程序的运行环境与 uni-app 的 script setup 语法存在一些兼容性问题。

问题分析

在 script setup 语法中，ref 是用于创建响应式数据的。通常情况下，ref 可以在组件的任何地方使用，包括生命周期函数中。但在支付宝小程序中，可能会遇到 ref 在生命周期函数中无法正常使用的情况，这可能是由于支付宝小程序的运行环境对 script setup 的支持不完全导致的。

解决方案

以下是一些可能的解决方案：

使用 onMounted 生命周期钩子：确保你在 onMounted 生命周期钩子中使用 ref，因为这是组件挂载后的生命周期钩子，此时 ref 应该已经被正确初始化。

<script setup>
import { ref, onMounted } from 'vue'

const myRef = ref(null)

onMounted(() => {
  console.log(myRef.value) // 应该可以正常访问
})
</script>

<template>
  <div ref="myRef">Hello World</div>
</template>

使用 nextTick：如果你在 onMounted 中仍然无法访问 ref，可以尝试使用 nextTick 来确保 DOM 已经更新。

<script setup>
import { ref, onMounted, nextTick } from 'vue'

const myRef = ref(null)

onMounted(() => {
  nextTick(() => {
    console.log(myRef.value) // 应该可以正常访问
  })
})
</script>

<template>
  <div ref="myRef">Hello World</div>
</template>

使用 getCurrentInstance：如果上述方法仍然无效，可以尝试使用 getCurrentInstance 来获取当前组件的实例，然后通过实例访问 ref。

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'

const myRef = ref(null)

onMounted(() => {
  const instance = getCurrentInstance()
  console.log(instance.refs.myRef) // 应该可以正常访问
})
</script>

<template>
  <div ref="myRef">Hello World</div>
</template>

检查支付宝小程序的版本：确保你使用的支付宝小程序基础库版本是最新的，因为较新的版本可能会修复一些兼容性问题。

回退到 Options API：如果以上方法都无法解决问题，可以考虑暂时回退到 Options API，避免使用 script setup 语法。

<script>
export default {
  data() {
    return {
      myRef: null
    }
  },
  mounted() {
    console.log(this.$refs.myRef) // 应该可以正常访问
  }
}
</script>

<template>
  <div ref="myRef">Hello World</div>
</template>