Vue Composition Api - watch 属性 传递给外部组合函数

Question

我想观看从设置传递给合成函数的道具：

async setup(props) {
  const { data } = await useOperation(query, props.isEdit);
}

每次 isEdit 的值改变时，我想在手表中做一些事情：

export const useOperation = async (query, isEdit) => {
  const reload = ref(isEdit)
  watch(
    () => reload.value,
    (result) => {
      console.log(result)
    }
  )
  const { data } = await fetch(query)

  return {
    data
  }
}

当props.isEdit改变时，手表不会被触发。我该怎么做？

Answer 1

你应该直接在setup中观看道具变化：

async setup(props) {
  const { data } = await useOperation(query, props.isEdit);

  watch(
    () => props.isEdit,
    (result) => {
      console.log(result)
    }
  )
}

来自 运行宁：

watch(
  () => reload.value,
  (result) => {
    console.log(result)
  }
)

您正在观察 reload 变量而不是 props.isEdit，并且由于 useOperation 在 setup 期间仅 运行 一次，并且 reload不暴露在任何地方，它的值永远不会改变。

---

或者，如果您确实想在 useOperation 中观看，请确保将 props 作为参数传递，并且将 watch 作为 props.isEdit:

export const useOperation = async (query, props) => {
  watch(
    () => props.isEdit,
    (result) => {
      console.log(result)
    }
  )
...