无法查看克隆值

Question

这是我的问题的最小示例。我试图在 SO 上找到类似的问题，但没有找到任何东西，如果它是重复的，请见谅。

App.vue

 <template>
  <div>
    <SubComponent v-model="myValue" />
    <SubComponent v-model="myClonedValue" />
  </div>
</template>

<script>
import SubComponent from "./components/SubComponent";

export default {
  components: { SubComponent },
  data: function () {
    return {
      myValue: {
        foo: 45,
        bar: 38,
      },
    };
  },
  computed: {
    myClonedValue: function () {
      return { ...this.myValue };
    },
  },
  watch: {
    "myValue.foo": function (val, oldVal) {
      console.log(val, oldVal);
    },
    /* This Doesn't work either

    "myClonedValue.foo": function (val, oldVal) {
      console.log(val, oldVal);
    },
    */
    myClonedValue: {
      handler: function (val, oldVal) {
        console.log(val, oldVal);
      },
      deep: true,
    },
  },
};
</script>

子组件

<template>
  <input v-model="value.foo" type="text" />
</template>

<script>
export default {
  name: "SubComponent",
  props: {
    msg: String,
    value: Object,
  },
};
</script>

问题

在我的主要用例中，我有一个对象，只有在确认更改后才想修改它。所以我用计算属性克隆它的值，出于某种原因，我需要观察一些值是否被修改。我的问题在这里，您可以在此 CodeSandBox 上在线查看 CodeSandBox project 一旦我克隆数据值，VueJS 就不会检测到任何变化。如果您更改我示例的第二个输入，则不会发生任何事情。

我该如何解决这个问题？

Answer 1

计算属性不只是克隆一次原始值。它创建一个反应绑定并在每次原始值更改时重新计算。所以你需要一种不同的方法。

将 clonedValue 设为常规数据属性，并在 created 或 Mounted 生命周期挂钩中为其分配一个值。然后您将能够以原始价值观看它。而且（我认为）更重要的是，现在您将能够独立修改原始值和克隆值。

data: {
    myValue: { foo: 1, bar: 2 },
    clonedValue: {}
},
created() {
    this.clonedValue = {...this.myValue}
}

Answer 2

您可以使用深度观察者来实现这一点，但您可能必须自己检查内部键

watch: {
    myValue: {
        handler (val, oldVal) {
            if(val.prop !== oldVal.prop){
               // do something
            }
        },
        deep: true,
    },
},