Vue.js 3 - replace/update 不失去反应性的反应对象

Question

我需要在获取后用一些数据更新反应对象：

  setup(){
    const formData = reactive({})

    onMounted(() => {
      fetchData().then((data) => {
        if (data) {
          formData = data //how can i replace the whole reactive object?
        }
      })
    })
  }

formData = data 将不起作用并且 formData = { ...formdata, data }

有更好的方法吗？

Answer 1

根据the official docs：

Since Vue's reactivity tracking works over property access, we must always keep the same reference to the reactive object. This means we can't easily "replace" a reactive object because the reactivity connection to the first reference is lost

reactive 应该定义一个带有嵌套字段的状态，可以像 :

 setup(){
    const data= reactive({formData :null })

    onMounted(() => {
      fetchData().then((data) => {
        if (data) {
          data.formData = data 
        }
      })
    })

  }

如果只有一个嵌套字段，则使用 ref：

  setup(){
    const formData = ref({})

    onMounted(() => {
      fetchData().then((data) => {
        if (data) {
          formData.value = data 
        }
      })
    })

  }

Answer 2

尽管 Boussadjra Brahim 的解决方案有效，但它并不是问题的确切答案。

从某种意义上说，无法使用 = 重新分配反应性数据，但它们是一种重新分配反应性数据的方法。是Object.assign.

因此这应该有效

    setup(){
        const formData = reactive({})
    
        onMounted(() => {
          fetchData().then((data) => {
            if (data) {
              Object.assign(formData, data) // equivalent to reassign 
            }
          })
        })
      }

注意：当你的反应对象为空或总是包含相同的键时，解决方案是最好的方法；但是如果 formData 有 key x 而 data 没有 key x 那么在 Object.assign 之后，formData 仍然会有 key x，所以不严格不重新分配。

demo example; including watch

Answer 3

我猜：

formData = reactive(newObject)

Vue.js 3 - replace/update 不失去反应性的反应对象

Vue.js 3 - replace/update reactive object without losing reactivity

vue.js

vuejs3

vue-composition-api