我知道像這樣的問題有很多,但這個問題有點不同。我把AA看reactivity in depth,認爲我對這個問題一個公平的理解,有一件事我不能,雖然理解是這樣的:爲什麼觀看的對象沒有在vue中更新
TL;博士
爲什麼當currentValue = Object.assign=({}, currentValue, initValue)
初始化做了觀察的屬性寄存器的變化但沒有直接轉讓currentValue = initValue;
?
我有一個註冊的對象,scoreRules
我VUE組件的模型
在mounted
鉤,
我模特的
scoreRules
使用this.$data.scoreRules = initScoreRules;
(重新初始化
initScoreRules
作爲道具傳入,但是我聲明爲爲了這個問題的目的,本地的 變量)。手錶
scoreRules
當對象發生變化時,更改和日誌「分數已更改」。
此片段展示了此方案
new Vue({
el: '#app',
data() {
return {
scoreRules: {
type: "number",
minimum: null,
maximum: null
}
}
},
mounted() {
let initScoreRules = {type: "number"};
this.$data.scoreRules = initScoreRules;
this.$watch('scoreRules',()=>{console.log("score has been changed")}, {deep: true});
}
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.js"></script>
</head>
<body>
<div id="app">
<span>Minimum score</span>
<input type="number" name="minimumScore" v-model.number="scoreRules.minimum" />
</body>
</html>
現在,當我輸入的東西到輸入,手錶不抓住這個變化,並沒有什麼記錄到控制檯。
如果我現在使用 this.$data.scoreRules = Object.assign({}, this.$data.scoreRules, initScoreRules);
new Vue({
el: '#app2',
data() {
return {
scoreRules: {
minimum: null
}
}
},
mounted() {
let initScoreRules = {};
this.$data.scoreRules = Object.assign({}, this.$data.scoreRules, initScoreRules);
this.$watch('scoreRules',() => {
console.log("score has been changed")
}, {
deep: true
});
}
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.js"></script>
</head>
<body>
<div id="app2">
<span>Minimum score</span>
<input type="number" v-model.number="scoreRules.minimum" />
</div>
</body>
</html>
完成變更登記,並輸出記錄到控制檯重新初始化scoreRules
。爲什麼?我懷疑它與JS本身的內部有關,但我不確定如何。
對象是引用類型。這就是爲什麼你需要用'Object.assign'克隆一個對象,而不是用'='指向現有的對象。當您創建一個新對象時,Vue有可能爲對象及其屬性設置反應環境。 – wostex
我明白了。使用'='直接賦值將指向一個無反應的對象,並因此更改爲未註冊的對象。現在看起來很明顯。謝謝。 –