如何对Vue的data中定义的对象中未定义的属性进行响应式的修改

受JS的限制，Vue无法检测到属性的添加与删除。VUe实例会在初始化实例时，对属性执行getter/setter的转化过程，所以属性必须得是data对象上存在的，才可以让Vue转化它，这样才能让它是响应式的。

let vm = new Vue({
data:{
		a:1
	}
})
//vm.a是响应式的
vm.b=2
//vm.b则不是响应式的了

上述的a属性时响应式的，所以当a属性发生变化时，会将变化的结果实时的渲染到页面上。而b是vm实例创建之后添加的属性，所以它不是响应式的，所以我们在修改b的值的时候，通过DevTool看到的数据也不会发生改变

解决方法

let vm = new Vue({
	el:"#app",
	dara:{
	obj:{
		name:'aaa'
	}
})

• 方法一：利用Vue.set（Object,key,value）

Vue.set(this.obj,"sex","women")

• 方法二：利用this.$set(this.object,key,value)

this.$set(this.obj,"sex","man")

Vue不允许在初始化实例之后添加属性，同时也不允许在初始化实例之后，删除属性，所以要想删除已经在data中定义好的对象中存在的属性，可以使用

this.$delete(this.obj,"name")
//这样删除属性之后，页面上的数据也会实时的进行响应