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

2022-07-12 00:00:00 vue.js vuejs3

如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)
}

相关文章