Vue3 setup函数中为何无法返回watchEffect内部定义的变量

数据老陈

2026-9-28

错误原因

首要原因是块级作用域访问限制：data1、data2、data3是你在watchEffect的回调函数内部通过const声明的变量，仅能在回调函数内部访问，setup函数的顶级作用域无法读取这三个变量，因此return时会触发未定义报错。
隐藏问题：你调用getData时传入的id是ref类型的实例，需要通过.value才能拿到实际的id值，原写法也会导致getData接收参数异常。

解决方法

你需要在setup顶级作用域提前声明响应式变量，再在watchEffect回调中对变量赋值，参考代码如下：

import { ref, watchEffect, reactive, toRefs } from 'vue'

// 方案1：分别声明单个ref变量
setup(props) {
  const id = ref(props.id)
  // 外层提前声明响应式变量
  const data1 = ref()
  const data2 = ref()
  const data3 = ref()

  watchEffect(() => {
    const { data1: res1, data2: res2, data3: res3 } = getData(id.value)
    data1.value = res1
    data2.value = res2
    data3.value = res3
  })

  return { data1, data2, data3 }
}

// 方案2：合并为单个响应式对象，简化代码
setup(props) {
  const id = ref(props.id)
  const data = reactive({
    data1: null,
    data2: null,
    data3: null
  })

  watchEffect(() => {
    Object.assign(data, getData(id.value))
  })

  // 用toRefs保证解构后仍保留响应式
  return { ...toRefs(data) }
}