vue3中替代this.$set

在Vue 3中，可以使用`reactive`和`ref`来替代`this.$set`。`reactive`用于将一个对象转换为响应式对象，而`ref`用于将一个普通的数据转换为响应式数据。

具体来说，如果你想在Vue 3中更新一个对象的属性，可以使用`reactive`函数将该对象转换为响应式对象，然后直接修改属性的值即可，无需再使用`this.$set`。

示例代码如下：

import { reactive } from 'vue';

const data = reactive({
  name: 'John',
  age: 25
});

data.name = 'Tom'; // 直接修改属性的值

console.log(data.name); // 输出：Tom

如果你想在Vue 3中更新一个普通的数据，可以使用`ref`函数将该数据转换为响应式数据，然后通过`.value`来访问和修改数据的值。

示例代码如下：

import { ref } from 'vue';

const count = ref(0);

count.value++; // 修改数据的值

console.log(count.value); // 输出：1

需要注意的是，在Vue 3中，由于使用了Proxy来实现响应式系统，所以不再需要使用`this.$set`来动态添加或删除属性。如果需要动态添加属性，只需直接给对象赋值即可。

相关问题

vue.set和 this.$set

vue.set和this.$set都是用来在Vue实例中设置响应式属性的方法。它们的作用是相同的，但是使用方式略有不同。

vue.set的使用方式如下：

Vue.set(obj, propertyName, value)

this.$set的使用方式如下：

this.$set(obj, propertyName, value)

其中，obj是要设置属性的对象，propertyName是要设置的属性名，value是要设置的属性值。

这两个方法的作用是将一个非响应式的对象变成响应式的对象，并且能够触发视图更新。

需要注意的是，如果要在嵌套对象中设置属性，需要使用点号或方括号来访问属性。例如：

this.$set(obj.nestedObj, 'propertyName', value)

Vue.set 与this.$set的区别

Vue.set()和this.$set()都是用来在Vue实例中设置响应式属性的方法。它们的区别在于使用方式和作用域。

Vue.set()是全局方法，可以在任何地方使用。它的语法是`Vue.set(object, key, value)`，其中object是要设置属性的对象，key是属性名，value是属性值。Vue.set()会将属性设置为响应式属性，即当属性值发生变化时，会触发视图更新。

this.$set()是Vue实例的方法，只能在Vue实例中使用。它的语法是`this.$set(object, key, value)`，其中object是要设置属性的对象，key是属性名，value是属性值。this.$set()也会将属性设置为响应式属性。

总结一下区别：
- Vue.set()是全局方法，可以在任何地方使用；this.$set()是Vue实例的方法，只能在Vue实例中使用。
- Vue.set()的调用方式是`Vue.set(object, key, value)`；this.$set()的调用方式是`this.$set(object, key, value)`。

范例：<<引用：Vue.set()的使用。引用：this.$set()的使用。>>
1. 使用Vue.set()设置响应式属性

var vm = new Vue({
 data: {
    obj: {}
  }
})

Vue.set(vm.obj, 'key', 'value')
console.log(vm.obj.key) // 输出：value

2. 使用this.$set()设置响应式属性

var vm = new Vue({
  data: {
    obj: {}
  },
  methods: {
    setProperty() {
      this.$set(this.obj, 'key', 'value')
    }
  }
})

vm.setProperty()
console.log(vm.obj.key) // 输出：value