Vue 3 - 观看道具在向父母发出后停止工作答案

【问题标题】：Vue 3 - Watching prop stops working after emitting to parentVue 3 - 观看道具在向父母发出后停止工作
【发布时间】：2023-01-11 20:32:47
【问题描述】：

我在尝试观看子组件中的道具时遇到问题。这是一个 playground 链接，其中包含一些代码来重现该问题：

Vue SFC Playground

子组件（橙色）从父组件（只是一个数组）继承数据。子组件在数据发生变化时从父组件复制数据，然后您可以修改（追加）到子数据，并且当您点击救，数据应该发送到父级（然后作为道具传递给子级）。

问题是，一旦你点击救在子组件中，子组件不再能够观察 prop 的变化。它永远不会看到父母的未来变化。不过，Vue devtools 可以正确地看到数据。我在这里错过了什么？

【问题讨论】：

标签： javascript vue.js vuejs3 watch prop

【解决方案1】：

watch 可组合项接受函数或 ref。

你的 props.list 并不是真正的反应数据，所以你需要在你的手表中使用一个 getter 函数，让它正确地监听 prop 的变化：

watch(() => props.list, () => {
  // ...
})

看到这个working playground

【讨论】：

【解决方案2】：

尝试将您的观察者设置为：

  watch(
    () => props.list,
      (newValue, oldValue) => {
        console.log('updated!');
        internalCopy.value = JSON.parse(JSON.stringify(props.list));
     }, {
    immediate: true,
   deep: true,
 }

【讨论】：

【解决方案3】：

问题不在计算属性中，问题在您的 onAdd 方法中。由于这是一个数组，它应该由reference而不是value更新。

  const onAdd = (val) => {
    // data.value.list = val; ❌ 
    val.forEach((d, index) => {
      data.value.list[index] = d ✅
    })
  }

工作Vue SFC Playground

【讨论】：

【解决方案4】：

它还在 props 对象上进行深度监视，如下所示：

watch(props, () => {
  console.log('updated!');
  internalCopy.value = props.list;
}, {
  immediate: true,
  deep: true,
})

【讨论】：