Vue.js 3 - 替换/更新反应性对象而不会失去反应性答案

【问题标题】：Vue.js 3 - replace/update reactive object without losing reactivityVue.js 3 - 替换/更新反应性对象而不会失去反应性
【发布时间】：2021-04-20 05:59:02
【问题描述】：

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

  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 } 也不起作用

有没有更好的方法来做到这一点？

【问题讨论】：

标签： vue.js vuejs3 vue-composition-api

【解决方案1】：

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

  }

【讨论】：

【解决方案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，所以严格来说不要重新分配。

【讨论】：

【解决方案3】：

我猜是 formData = reactive(newObject)

【讨论】：