vue2中为什么使用this.$set，vue3为社么不需要了呢

在 Vue 2 中，使用this.$set是为了解决 Vue 无法检测到对象属性新增或删除的问题。Vue 2 通过Object.defineProperty()方法来进行数据劫持，从而实现数据响应式。但这种方式有一定的局限性，它只能在初始化时对对象的已有属性进行劫持，当动态添加新属性或删除已有属性时，Vue 无法自动检测到这些变化，也就不会触发视图更新。例如：

javascript

export default {
  data() {
    return {
      obj: {
        name: 'John'
      }
    };
  },
  methods: {
    addProperty() {
      // 直接添加新属性，Vue 2无法检测到
      this.obj.age = 30; 
    }
  }
};

此时就需要使用this.$set来手动触发响应式更新，将上述代码中的addProperty方法改为：

javascript

addProperty() {
  this.$set(this.obj, 'age', 30);
}

这样就能让 Vue 2 检测到obj对象新增了age属性，并更新视图。

而在 Vue 3 中，不再需要this.$set，这是因为 Vue 3 使用Proxy对象来实现响应式系统。Proxy可以对整个对象进行代理，能够拦截对象的各种操作，包括属性的添加、删除、访问等。因此，当动态添加或删除对象属性时，Vue 3 能够自动检测到这些变化并触发相应的更新。例如在 Vue 3 中：

javascript

import { reactive } from 'vue';

export default {
  setup() {
    const obj = reactive({
      name: 'John'
    });

    function addProperty() {
      // 直接添加新属性，Vue 3可以检测到
      obj.age = 30; 
    }

    return {
      obj,
      addProperty
    };
  }
};

Vue 3 的Proxy - based 响应式系统能够自动追踪对象的变化，无需像 Vue 2 那样使用this.$set来手动处理新增属性的响应式问题。