【前端学习】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');