Vue.set设置响应式数据

vue最强大的特点在于它的响应式，所谓响应式是在vue的初始化的过程中，通过数据的劫持结合发布者-订阅者模式为每一个属性增加了get和set方法，使之当对应的数据依赖发生变化的时候能实时侦测到变化，以便于视图的更新。

如果我们需要的一些数据是在初始化之后创建的，那么它是否还会具有响应式？

let vm=new Vue({
     
	data:{
     
		name:'张三',
		age:18,
		person:{
     
			name:'李四',
			age:20
		}
	}
})
//毫无疑问，此时data中的数据是响应式的，但是创建完成之后我重新对data中的属性进行修改
vm.sex='男' // vue对于在初始化之后想加入的属性是不具有响应式的

vue为了解决在初始化完成之后对数据的增加删除操作时，更好的兼容响应式而采取了Vue.set来对想增加的数据赋予响应式的能力
vue.set(target,index/properties,value)接收三个参数，当给对象添加属性时，traget就是说要操作的对象，当操作的是数组，那就是数组。index和property是对应数组和对象。value是数据

var vm=new Vue({
     
	data:{
     
		person:{
     
			name:'Lisi',
			age:20
		}
	}
})
//现在需要给person对象添加sex属性，并且让他具有响应式
Vue.set(this.person,"sex",'男') //这样就是sex追加上去了，并且是响应式的
vm.person.sex='女' //状态更新，视图也会更新

注意点

• 上面的这种方式是把响应式数据添加到嵌套响应式对象上的，因为Vue是没有办法监测普通的新增属性（vm.data.addres="china’）
• 并且不能把属性追加到根数据对象上，或者vue实例上。换言之就是不能直接在data第一层来添加响应式对象，只能嵌套在对象或者是数组中

总结：
　　vue在构造函数new Vue()时，也就是在初始化的过程中，就通过Object.defineProperty中的getter和setter 这两个方法，完成了对数据的绑定。所以直接通过vm.aaa= ‘aa’的方法，无法修改值去触发vue中视图的更新，通过Object.defineProperty的方法去改变。Vue.set()底层就是Object.defineProperty,对新增数据的劫持，添加get和set方法来实现