vue2添加或删除data中定义对象的属性，界面不更新

1、在vue2中，如果在data函数中定义了一个对象，但是在methods中想要给对象添加/删除属性，直接添加/删除数据会变，但是界面不会变化。

2、如果给对象中的数组，通过索引方式修改 界面也不会变化

data(){
	person:{
			name:'哈哈',
			age:18,
			info:['抽烟', '喝酒', '烫头']
	}
},
methods:{
	clickBtn(){
		this.person.sex = '男' //如果在模板中使用sex，页面不会显示数据
	}
}

添加属性

方案1

this.$set( 对象, 需要新增的属性, 属性值 )

this.$set( person, ‘sex’, ‘男’ )

方案2

1、导入vue
          import Vue from ‘vue’
2、Vue.set( 对象, 新增属性, 属性值 )

删除属性

delete person.name 是不会生效的 ，因为definedProperty只有get和set方法，没有新增和删除方法

方案1

this.$delete( 对象, 删除的属性)

this.$delete( person, ‘sex’ )

方案2

1、导入vue
          import Vue from ‘vue’
2、Vue.delete( 对象, 删除的属性)

修改数组数据

this.person.info[0] = ‘打球’ 界面不会变化

方案1

this.$set( 对象.数组, 需要修改的索引, 属性值 )

      this.$set( this.person.info, 0, ‘打球’ )

方案2

this.person.info.splice( 0, 1, ‘打球’ )