Vue2中向页面额外添加数据和更改数组不触发响应式问题

新增属性、删除属性, 界面不会更新。

当想动态的向 data 中添加数据，例如调用一个方法，向已有对象中添加一个属性，想要实现响应式，需要调用 组件实例对象身上的 $set方法，或者调用 Vue 身上的 set 方法。

直接通过下标修改数组, 界面不会自动更新。

1.调用组件实例对象身上的 $set方法，或者调用 Vue 身上的 set 方法。

2.调用数组身上的方法进行修改

// 想使用Vue身上的方法需要先引入

import Vue from 'vue'
// 动态更新数据--向已有对象中动态添加属性
updata(){
		// this.$set('要向哪个对象添加数据','对象名','对象值')
		this.$set(this.person,'sex','女')
		Vue.set(this.person,'sex','女')
}

// 动态更新数据--删除已有对象中的属性
deleteData(){
		// this.$delete('要删除哪个对象数据','对象名')
		this.$delete(this.person,'sex')
		Vue.delete(this.person,'sex')
}
// 修改原始数组的内容
updataArr(){
		// this.$set('要修改的数组',数组索引,'修改的值')
		this.$set(this.arr,0,'修改的数据')
		Vue.set(this.arr,0,'修改的数据')
        // 调用数组本身的方法进行响应式修改
        this.arr.splice(0,1,'修改的数据')
}