我如何 return vue 3设置函数中watchEffect中的变量

Question

setup(props) {
  const id = ref(props.id)
  watchEffect(() => {
    const { data1, data2, data3 } = getData(id)
  })

  return { data1, data2, data3 }
}

这只是一部分代码，watchEffect、ref 和 getData都是导入的，但是下面的 return 函数说 data1, data2, data3 是未定义的，这是为什么？

Answer 1

在函数外声明refs：

setup(props) {
  const id = ref(props.id);
  const data1 = ref(null);
  const data2 = ref(null);
  const data3 = ref(null);

  watchEffect(() => {
    [data1.value, data2.value, data3.value] = getData(id)

  })

  return { data1, data2, data3 }
}

如果你 return 一个对象：

setup(props) {
  const id = ref(props.id);
  const data1 = ref(null);
  const data2 = ref(null);
  const data3 = ref(null);

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

  })

  return { data1, data2, data3 }
}

我没有你的其余代码，但我相信它可以更优化...

我如何 return vue 3设置函数中watchEffect中的变量

How do I return variables in watchEffect from vue 3 setup function

javascript

vuejs3

vue-composition-api