這是我的問題的最小示例。我試圖在 SO 上找到類似的問題，但沒有找到任何東西，如果它是重復的，很抱歉。
應用程式.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 專案上在線看到的那樣，一旦我克隆資料值，VueJS 就不會檢測到任何變化。如果您更改我示例的第二個輸入，則不會發生任何事情。
我該如何解決這個問題？
uj5u.com熱心網友回復：
計算屬性不只是克隆一次原始值。它創建一個反應系結并在每次原始值更改時重新計算。所以你需要一種不同的方法。
使 clonedValue 成為常規資料屬性，并在 created 或 Mounted 生命周期掛鉤中為其分配一個值。然后您將能夠以原始價值觀看它。而（我假設）更重要的是，現在您將能夠獨立修改原始值和克隆值。
data: {
myValue: { foo: 1, bar: 2 },
clonedValue: {}
},
created() {
this.clonedValue = {...this.myValue}
}
uj5u.com熱心網友回復：
您可以使用深度觀察者來實作這一點，但您可能必須自己檢查內部鍵
watch: {
myValue: {
handler (val, oldVal) {
if(val.prop !== oldVal.prop){
// do something
}
},
deep: true,
},
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/417286.html
標籤：