Vue.set() 和 this.$set() 的用法与详解

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。

对于对象

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter
转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的

var vm = new Vue({
	el:"#app",
	data:{
		address：'西安',
		userInfo:{
			name:"Tom",
			age:28,
			gender:"male",
			salary:"secret"
		}
	}
})
//给上述例子添加个sex属性
this.data.userInfo.sex = '男'   //这样添加的数据是非响应式的 所以就用到了Vue.set()

给对象添加属性

Vue.set( target, key, value )

参数：
1. target 追加属性的目标对象
2.key 需要追加属性的名
3.value 需要追加属性的值
注意 Vue.set只能给data中的某一个对象添加属性 不能给data添加属性

var vm = new Vue({
	el:"#app",
	data:{
		address：'西安',
		userInfo:{
			name:"Tom",
			age:28,
			gender:"male",
			salary:"secret"
		}
	}
})
//给上述例子添加个sex属性
Vue.set(vm.userInfo,"sex","男")
// 或者通过Vue实例
vm.$set(vm.userInfo,"sex","女") //$set为Vue.set()的别名

对于数组

平时操作数组主要是使用数组的变异方法 Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
Vue 不能检测以下数组的变动：

1.当你利用索引直接设置一个数组项时，例如：vm.items[1] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength

var vm = new Vue({
	el:"#app",
	data:{
		address：'西安',
		userInfo:{
			name:"Tom",
			age:28,
			gender:"male",
			salary:"secret",
			hobby:['打篮球'，'下象棋’]
		},
	
	}
})
//如果想给上述例子hobby中修改元素 '打篮球' 为 '踢足球'
this.data.userInfo.hobby[0] = '踢足球'   //这样的数据是非响应式的 所以就用到了Vue.set()

修改数组元素

Vue.set( target, index, value )

参数：
1. target 修改的目标数组
2. index 需要修改数组元素的索引
3.value 需要修改数组元素的值

var vm = new Vue({
	el:"#app",
	data:{
		address：'西安',
		userInfo:{
			name:"Tom",
			age:28,
			gender:"male",
			salary:"secret",
			hobby:['打篮球'，'下象棋’]
		},
	
	}
})
//如果想给上述例子hobby中修改元素 '打篮球' 为 '踢足球'
Vue.set(vm.userInfo.hobby,0,'踢足球')
// 或者通过Vue实例
vm.$set(vm.userInfo.hobby,0,'踢足球') //$set为Vue.set()的别名