Vue 3中如何使用Vue.set()？无法导入set方法该如何处理

Vue 3 已完全移除了 Vue 2 中提供的 Vue.set/this.$set 方法，也不支持从 vue 包中直接导入 set API，原因和替代方案如下：

移除原因 #

Vue 2 的响应式系统基于 Object.defineProperty 实现，只能监听已有属性的读写操作，动态新增的对象属性、通过下标修改的数组项默认不具备响应性，因此需要额外的 set 方法手动标记为响应式。
Vue 3 改用 Proxy 实现响应式代理，可原生支持监听对象属性新增/删除、数组下标修改/长度调整等所有操作，不需要额外API做辅助处理。

原 Vue.set 功能的替代写法 #

所有原先需要调用 set 的场景，直接做普通赋值操作即可，自动具备响应性：

• 给响应式对象新增属性：
  原 Vue 2 写法：

  Vue.set(obj, 'newProp', 123)
  // 或
  this.$set(obj, 'newProp', 123)
  

  Vue 3 写法：

  obj.newProp = 123
  

• 按下标修改数组项：
  原 Vue 2 写法：

  Vue.set(arr, 2, 'newVal')
  

  Vue 3 写法：

  arr[2] = 'newVal'
  

如果是用 ref 包裹的响应式数据，操作时记得取 .value 即可：

const obj = ref({ a: 1 })
obj.value.b = 2 // 新增属性自动响应
const arr = ref([1,2,3])
arr.value[1] = 99 // 按下标修改自动响应

注意：只有本身是响应式的对象/数组才支持上述操作，普通JS对象直接赋值不会触发响应式更新。

内容的提问来源于stack exchange，提问作者bbsimonbb