我如何在 Vue 3 中执行 Vue.set() ?
How do I do Vue.set() in Vue 3?
如 here 所述,Vue 3 已经移动了一堆在全局 Vue 实例上可用的函数。它们现在被命名为 imports。这让我觉得我应该能够做到 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
}
}
This article 谈论 vue 2 和 3 中的反应性(组合 + 选项 API)
您不需要,因为 vue 3 现在使用代理检测。如果您使用的是手表并且它不工作,请使用标签 deep: true
如 here 所述,Vue 3 已经移动了一堆在全局 Vue 实例上可用的函数。它们现在被命名为 imports。这让我觉得我应该能够做到 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
}
}
This article 谈论 vue 2 和 3 中的反应性(组合 + 选项 API)
您不需要,因为 vue 3 现在使用代理检测。如果您使用的是手表并且它不工作,请使用标签 deep: true