Vue3 Options API下如何更新响应式对象？

问题根源 #

Vue3的响应式系统基于Proxy实现，与Vue2的Object.defineProperty机制存在差异。当你在resetForm中直接替换整个accountProperties对象时，虽然该变量本身是响应式的，但在组件初始化阶段（如mounted中立即执行替换），部分UI组件（如Quasar的q-input/q-select）的v-model绑定可能无法及时感知到对象引用的变化，导致视图与数据不同步。

解决方案1：修改原有对象属性（推荐） #

不直接替换整个accountProperties对象，而是通过Object.assign更新原有对象的属性，保留响应式代理的引用，确保所有绑定的组件能正确追踪变化：

methods: {
  resetForm() {
    if (this.account) {
      Object.assign(this.accountProperties, {
        title: this.account.title,
        type: this.account.type,
        balance: this.account.balance,
        currencyCode: this.account.currencyCode
      })
    } else {
      Object.assign(this.accountProperties, initAccount())
    }
  }
}

解决方案2：使用Ref包裹对象 #

将accountProperties定义为ref，通过修改.value来替换整个对象，ref的响应式追踪会直接感知到对象引用的变化：

选项式API写法：

import { ref } from 'vue'

function initAccount() {
  return {
    title: '',
    type: null,
    balance: 0,
    currencyCode: null
  }
}

export default {
  props: ['account'],
  data() {
    return {
      accountProperties: ref(initAccount())
    }
  },
  mounted() {
    this.resetForm()
  },
  methods: {
    onSubmit() {
      // dispatch this.accountProperties.value
    },
    resetForm() {
      if (this.account) {
        this.accountProperties.value = {
          title: this.account.title,
          type: this.account.type,
          balance: this.account.balance,
          currencyCode: this.account.currencyCode
        }
      } else {
        this.accountProperties.value = initAccount()
      }
    }
  }
}

Composition API写法（Vue3推荐）：

import { ref, onMounted } from 'vue'

function initAccount() {
  return {
    title: '',
    type: null,
    balance: 0,
    currencyCode: null
  }
}

export default {
  props: ['account'],
  setup(props) {
    const accountProperties = ref(initAccount())

    const resetForm = () => {
      if (props.account) {
        accountProperties.value = {
          title: props.account.title,
          type: props.account.type,
          balance: props.account.balance,
          currencyCode: props.account.currencyCode
        }
      } else {
        accountProperties.value = initAccount()
      }
    }

    const onSubmit = () => {
      // dispatch accountProperties.value
    }

    onMounted(() => {
      resetForm()
    })

    return {
      accountProperties,
      onSubmit,
      resetForm
    }
  }
}

模板部分无需修改，因为Vue3会自动为模板中的ref变量解包。

内容的提问来源于stack exchange，提问作者cooperok