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

Posted 2023-02-16

【中文标题】Vue.js 3 - 替换/更新反应性对象而不会失去反应性

【英文标题】：Vue.js 3 - replace/update reactive object without losing reactivity

【发布时间】：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 也不起作用

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

【参考方案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)