Vue.js 3 - 在不失去反应性的情况下替换/更新反应性对象

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 }

有一个更好的方法吗？

原文由 claud.io 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据 官方文档：

由于 Vue 的反应性跟踪通过属性访问工作，我们必须始终保持对反应性对象的相同引用。 这意味着我们不能轻易地 “替换” 一个反应对象，因为与第一个引用的反应连接丢失了

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

  }

原文由 Boussadjra Brahim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

因此这应该工作

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

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

笔记：

当您的反应对象为空或始终包含相同的键时，此解决方案有效。

However, if for example, formData has key x and data does not have key x then after Object.assign , formData 仍然会有 key x ，所以这不是 严格 的重新分配。

演示示例；包括手表

原文由 Ashwin Bande 发布，翻译遵循 CC BY-SA 4.0 许可协议