Vue状态实时更新异常求助：WebSocket更新后子组件Data未同步Props数据

我来帮你分析下这个问题：你现在遇到的情况是因为**client_form只是组件初始化时从order props里复制的一份静态快照**，Vue的响应式系统不会自动帮你同步后续order的更新到client_form里。而模板里直接用{{ order.client.fullName }}能实时更新，是因为order本身是响应式的props，Vue会追踪它的变化。

下面给你两种针对性的解决方案，你可以根据自己的需求选择：

方案1：用计算属性（推荐，适合不需要修改client_form的场景） #

如果client_form只是用来展示数据，不需要用户编辑修改，直接把它改成计算属性就可以了。计算属性会自动依赖order的变化重新计算，实现实时同步：

props: ['order'],
computed: {
  client_form() {
    return {
      order_id: this.$route.params.id,
      client_id: this.order.client.id,
      fullName: this.order.client.fullName,
      email: this.order.client.email,
      phone: this.order.client.phone,
      city: this.order.client.shipping.city,
      address: this.order.client.shipping.address,
      zip: this.order.client.shipping.zip,
      province: this.order.client.shipping.province,
      comment: this.order.comment
    }
  }
}

修改后，模板里用{{ client_form.fullName }}就会和order的更新实时同步了。

方案2：用watch监听order变化（适合需要编辑client_form的场景） #

如果client_form是用来做表单输入，需要用户修改内容的话，计算属性就不太方便了。这时候可以用watch来监听order的变化，手动更新client_form：

props: ['order'],
data() {
  return {
    client_form: {}
  }
},
// 组件创建时初始化一次client_form
created() {
  this.updateClientForm()
},
watch: {
  // 深度监听order对象内部的属性变化
  order: {
    deep: true,
    handler() {
      this.updateClientForm()
    }
  }
},
methods: {
  updateClientForm() {
    const { order } = this
    this.client_form = {
      order_id: this.$route.params.id,
      client_id: order.client.id,
      fullName: order.client.fullName,
      email: order.client.email,
      phone: order.client.phone,
      city: order.client.shipping.city,
      address: order.client.shipping.address,
      zip: order.client.shipping.zip,
      province: order.client.shipping.province,
      comment: order.comment
    }
  }
}

这里我们把初始化逻辑抽成了updateClientForm方法，在组件创建时调用一次，之后每次order变化时，watch会触发这个方法重新更新client_form，既保证了初始值和order同步，也允许用户修改client_form的内容。

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