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

Posted 2023-02-22

【中文标题】如何在 Vue 3 中执行 Vue.set()？

【英文标题】：How do I do Vue.set() in Vue 3?

【发布时间】：2021-12-15 05:07:46

【问题描述】：

正如here 解释的那样，Vue 3 已经移动了一系列在全局 Vue 实例上可用的函数。它们现在被命名为导入。这让我觉得我应该能够做到import set from 'vue'，但我做不到。它不在那里。 set() 在哪里？

【问题讨论】：

在 vue 3 中你应该不再需要 set 了。你在哪里发现仍然需要使用 set ？

Vue.set 仅在兼容性版本中可用，因为 Vue3 中的新功能意味着您将不再遇到 Vue2 中的反应性问题：v3.vuejs.org/guide/migration/…。你能分享一下为什么需要 Vue.set 的 MCVE 吗？

是的。事实上，它是不需要的。我正在移植一些代码，所以四处寻找它。伟大的。我可以不用它。

【参考方案1】：

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)