Vue.js组件中异步方法的更新丢失问题求助

我开发了一个Vue.js组件，会在触发blur事件时异步将消息保存到服务器，异步更新方法如下：

async saveAsync($event) {
  const value = $event.target.value;
  this.message.state = `saving ${value}...`;
  this.message.text = await new Promise((resolve, reject) => {
    setTimeout(() => resolve(value + value.length), 1000)
  });
  this.message.state = "saved";
}

但当绑定的prop message在异步操作期间发生变化时，message.text能正常更新，message.state却始终停留在saving状态，无法更新为saved。返回的JSON示例如下：

[
  {
    "text": "1#ChangedMessage16", // 正确
    "state": "saving 1#ChangedMessage..." // 错误，应为"saved"
  },
  {
    "text": "2#Message",
    "state": "saved"
  },
  {
    "text": "3#Message",
    "state": "saved"
  }
]

问题原因 #

这是因为违反了Vue单向数据流的核心原则：Prop的所有权属于父组件，子组件仅能读取Prop，不能直接修改。当父组件更新message时，子组件内的message引用会被父组件的新值覆盖，异步操作完成后对state的赋值要么操作的是已被废弃的旧message对象，要么被父组件的后续更新冲掉，最终导致渲染的state不符合预期。

解决方案 #

通过子组件触发事件通知父组件更新的方式，由父组件负责修改message，严格遵守单向数据流：

1. 子组件内定义本地状态同步Prop，避免直接操作Prop：

export default {
  props: ['message'],
  data() {
    return {
      localMessage: { ...this.message }
    }
  },
  watch: {
    // 监听Prop变化，同步到本地状态
    message(newMsg) {
      this.localMessage = { ...newMsg };
    }
  },
  methods: {
    async saveAsync($event) {
      const value = $event.target.value;
      // 更新本地状态的保存中状态
      this.localMessage.state = `saving ${value}...`;
      // 通知父组件更新
      this.$emit('update:message', { ...this.localMessage });

      // 模拟异步保存
      const savedText = await new Promise(resolve => {
        setTimeout(() => resolve(value + value.length), 1000);
      });

      // 更新本地状态的最终结果
      this.localMessage.text = savedText;
      this.localMessage.state = "saved";
      // 再次通知父组件更新
      this.$emit('update:message', { ...this.localMessage });
    }
  }
}

2. 父组件监听事件更新message：

<message-component 
  :message="currentMessage" 
  @update:message="currentMessage = $event"
></message-component>

3. 可选：使用v-model语法糖简化代码
   子组件添加model选项：

model: {
  prop: 'message',
  event: 'update:message'
}

父组件可直接用v-model绑定：

<message-component v-model="currentMessage"></message-component>

这样修改后，无论父组件何时更新message，子组件的异步操作都会基于最新的本地状态处理，且所有状态更新都由父组件统一管控，不会出现状态覆盖的问题。

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