如何在 Vue 3 中执行 Vue.set() ？

Question

正如此处所解释的，Vue 3 移动了全局 Vue 实例上可用的一堆功能。它们现在被命名为进口。这让我觉得我应该能做到import {set} from 'vue'，但我做不到。它不在那里。set()在哪里？

Answer 1

你不需要。

本文将帮助您理解为什么我们首先需要 vue.set。简而言之，您需要它以便可以向数据对象添加新属性而不破坏反应性。

使用 Vue 3，您不再需要担心破坏反应性。文章中说不应该在 Vue 2 中执行的操作，现在可以在 Vue 3 中执行。

vue 2 上的示例：

data() {
  return {
    personObject: {
      name: 'John Doe'
    }
  }
},
methods: {
  addBio(bio) {
     this.$set(this.personObject, 'bio', bio)  // this was needed on vue 2
}

现在，在 Vue 3 上，您可以将 bio 属性直接添加到对象中，并且该对象仍然是响应式的：

methods: {
  addBio(bio) {
     this.personObject['bio'] = bio
  }
}

Answer 2

本文讨论 vue 2 和 3 中的反应性（组合 + 选项 API）

您不需要这样做，因为 vue 3 现在使用代理检测。如果您使用的是手表并且它无法工作，请使用标签deep: true

watch: {
    deep: true
    someObject: {
      handler(newValue, oldValue) {
         x.x()
      },
      
    }
  }

请注意，deep true没有太多性能，所以不要在巨大的对象上使用它