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

编程基础网前端问题

2022-01-01

Vue.js 3 - replace/update reactive object without losing reactivity(Vue.js 3-替换/更新反应性对象而不会失去反应性)

本文介绍了Vue.js 3-替换/更新反应性对象而不会失去反应性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

  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 }

有没有更好的方法？

推荐答案

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

  }

这篇关于Vue.js 3-替换/更新反应性对象而不会失去反应性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！