Vue中数据响应式的解决方案（相关API）

Vue.set

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。造成在data上的数据无法响应式变化，无法响应式变化有以下3钟情况：

1. 动态地为对象增加属性

   点击更新后运行结果：
   
   从控制面板上可以看到对象age已赋值，但并没有动态的响应到界面中。接下来使用Vue.set(执行的对象, 属性值的名称, 属性值)或vm.$set(执行的对象, 属性值的名称, 属性值) 的方法来实现。

   test(){
   	this.$set(this.courses,"age",this.age)
   	console.log(this.courses)
   }
   

   执行的结果，界面动态响应了数据的变化：
   

2. 动态地为对象移除属性

点击删除后运行结果：

从控制面板上可以看到对象courses的age属性已成功删除，但并没有动态的响应到界面中。接下来使用Vue.delete(执行的对象或数组, 要删除的索引或属性名)或vm.$delete(执行的对象或数组, 要删除的索引或属性) 的方法来实现。

			delAge(){
				this.$delete(this.courses,"age" )
				console.log(this.courses)
			}

结果点击删除后，视图成功更新：

4. 利用索引直接设置一个数组项

点击更新后，执行的结果界面并未动态响应：

数据没有动态的响应到界面中，接下来使用Vue.set(执行的数组, 数组的索引, 值)或vm.$set(执行的数组, 数组的索引, 值) 的方法来实现。

	test(){
			this.$set(this.courses,0,this.age)
			console.log(this.courses)
		}

执行的结果：

3. 修改数组的长度

点击更新后，执行的结果界面并未动态响应：

接下来使用vm.items.splice(newLength)：

test(){
		this.courses.splice(1)
		console.log(this.courses)
}

执行的结果，成功了改变数组的长度：

总结

以下3种情况，在改变data数据的值时，为了达到响应式效果，应使用vue自身提供的API。
（1）对象：对象动态地增加或移除属性时，增加属性时请使用Vue.set(执行的数组, 数组的索引, 值)或vm.$set(执行的数组, 数组的索引, 值) ，移除属性时请使用Vue.delete(执行的对象或数组, 要删除的索引或属性名)或vm.$delete(执行的对象或数组, 要删除的索引或属性)
（2）数组：利用索引直接设置一个数组项时，请使用Vue.set(执行的数组, 数组的索引, 值)或vm.$set(执行的数组, 数组的索引, 值)
（3）数组：修改数组的长度时，请使用vm.items.splice(newLength)