【前端學習】Vue數據丟失

vue中數據模型中的屬性數據都設置了特性，當屬性數據改變的時候，頁面會自動更新。如果我們修改了模型中的數據，視圖沒有更新，我們就說這部分修改的數據丟失了，這是Vue框架的bug。

原因：丟失的數據是因爲沒有設置特性

在vue中常見的數據丟失有四種
1.數組中的值類型數據改變
當我們修改數組中值類型數據，數據會丟失
解決：用新數組替換原來的數組
2.數組中添加新成員
當我們爲數組添加新成員的時候，數據會丟失
解決：用新數組替換原來的數組
3.對象中添加新屬性
當我們爲對象添加新的屬性數據的時候，數據會丟失
解決：用新對象替換原來的對象
4.添加未在模型數據中聲明的屬性
當我們爲實例化對象添加屬性的時候，沒有在模型中聲明，數據會丟失
解決：在模型中將其預聲明

爲了避免數據丟失的問題，vue提供了$set()方法
第一個參數表示修改的數據對象
第二個參數表示數據的屬性名稱
第三個參數表示數據的屬性值

let app = new Vue({
	// 視圖
	el: '#app',
	// 模型
	data: {
		msg: 'hello',
		// 數組
		colors: ['red', { abc: 'efg' }, 'blue'],
		// 對象
		obj: {
			num: 10
		},
		// 初始化新屬性
		ickt: ''
	}
})

app.$set(app.colors, '0', 'gold');