我如何做Vue.set()在Vue 3?

Question

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

Answer 1

你不需要。

这篇文章将帮助您理解为什么我们需要value。设定在第一个位置。简而言之，您需要它，以便您可以在不破坏响应性的情况下向数据对象添加新属性。

使用Vue 3，您不再需要担心破坏反应性。文章中说在Vue 2中不应该做的事情，现在可以在Vue 3中做了。

示例:

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

现在，在Vue 3中，你可以直接将生物属性添加到对象中，对象仍然会反应:

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

Answer 2

本文讨论了v2和v3(组合+选项API)中的反应性

您不需要这样做，因为vue 3现在使用代理检测。如果你正在使用手表，它不工作，使用标签deep: true

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

}
}

注意深true性能不太好，所以不要在大型对象上使用