如何从 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 }
}

如果你返回一个对象：

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 }
}

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