在 Vue 中使用 Data 對象來存儲響應式數據。但是,當一個對象的屬性在聲明時沒有初始化時,它將被認為是“冷”數據。這意味著雖然它的存在不會影響 Vue 實例的響應式更新,但這個屬性仍然會存在于該實例中。這樣可能會導致一些意外的結果和問題。所以你需要特別注意關于“冷合同”。
在 Vue 的官方文檔中也提到了“冷合同”的問題。它的解決方法是使用 Vue.set() 或者 this.$set() 函數來添加新屬性來代替直接添加不會被 Vue 實例監視的“冷”屬性。這樣可以確保新屬性是響應式的,并且不需要特殊的維護。但是使用這個函數會讓你的代碼不那么簡潔。
// 使用 Vue.set Vue.set(vm.someObject, 'b', 2) // 使用 this.$set this.$set(this.someObject, 'b', 2)
除了在聲明對象屬性時避免使用“冷”數據外,還需要注意在使用 v-for 循環時。由于 Vue 實例不能自動檢測到添加到已經存在的數組中的新屬性,如果你想添加任何新屬性,你必須使用 Vue.set() 或者 this.$set() 來手動添加并觸發更新。如果你使用的是 ES2015,也可以使用 Object.assign() 或者 spread 運算符來代替。
// 使用 Vue.set Vue.set(vm.someArray, indexOfItem, newValue) // 使用 this.$set this.$set(this.someArray, indexOfItem, newValue) // 使用 Object.assign this.someArray = Object.assign([], this.someArray, {[indexOfItem]: newValue}) // 使用 spread 運算符 this.someArray = [...this.someArray.slice(0, indexOfItem), newValue, ...this.someArray.slice(indexOfItem + 1)]
還有一些情況也可能導致“冷合同”的問題,比如使用 v-model 綁定一個對象的屬性時,并且這個屬性在聲明時沒有被初始化,或者在模板中直接使用對象的屬性,并且這個屬性在聲明時沒有被初始化。在這種情況下,你需要確保屬性已經初始化。否則你需要使用 Vue.set() 或者 this.$set() 手動添加該屬性。
總之,“冷合同”可能會導致一些問題,但可以使用 Vue.set() 或者 this.$set() 來解決。要避免它的最好方法是在聲明對象屬性時始終初始化所有屬性。這樣可以讓 Vue 實例正確地檢測到屬性并保持響應式。