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

问题描述

如here所述，Vue 3移动了全局Vue实例上可用的一组函数。它们现在被命名为进口。这让我认为我应该能够做import {set} from 'vue'，但我做不到。它不在那里。Set()在哪里？

推荐答案

This article将帮助您首先了解我们为什么需要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)
}