Vue3废除了$set，如何向对象中添加响应式的属性

应用场景：后端返回一个数组，包含多个对象，经常会出现可能需要前端自己向对象中添加一个新的字段
在 vue2 中，我们知道直接添加属性，是不会出发页面的变化的，受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

比如

data() {
    
    
	return {
    
    
		info: {
    
    
			name: 'jth'
		}
	}
}

我想在info中添加一个 age 字段，直接 this.info.age = 12 很显然是不行的，页面并不会刷新，在vue2中提供了一个 $set 的方法

this.$set(this.info, 'age', 12)

这样就可以了，页面也会刷新，但是在 vue3 中，$set 被废除了，vue3中的数据响应式是利用的 ES6的 proxy ，如果想将一个对象变为响应式，只需要

setup() {
    
    
    const list = reactive(['你', '我', '它']);
    return {
    
    
        list,
    }
}
mounted() {
    
    
   // 完成更新
   this.list[2] = '他';
},

这种方法是vue3新出的API，数据直接就是响应式，十分方便

还有另一种方法

data() {
    
    
	return {
    
    
		info: {
    
    
			name: 'jth'
		}
	}
}

const proxy = new Proxy(this.info, {
    
    
              set(target, key, value, receiver) {
    
    
                target[key] = value;
                return true;
              },
            });
       proxy['age'] = 12

vue3 数据响应式的原理就是利用 ES6的 Proxy new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为

这样就可以实现上面的场景