Vue中修改复杂对象Prop且符合单向数据流规范的正确方案是什么

问题根因 #

你触发无限循环的核心原因是双向深度监听+全量同步逻辑形成了闭环：子组件监听到父组件prop变化后更新本地副本，本地副本变化又触发事件回写父组件，父组件更新prop后再次触发子组件监听，形成无限递归，同时频繁深拷贝也会带来不必要的性能损耗。

注：不少开发者图方便直接修改prop中引用类型的内部属性，虽然不会触发Vue的警告，但违反单向数据流原则，会导致数据变更来源不可追溯，不推荐使用。

公认实现方案 #

方案1：细粒度事件触发（优先推荐） #

无需在子组件维护全量深拷贝副本，也无需深度监听整个对象/数组，针对具体的修改动作触发对应事件，仅传递修改的增量信息，父组件自行更新原数据。
子组件示例代码：

// child.vue
export default {
  props: {
    tickets: Array
  },
  methods: {
    // 修改指定门票的数量
    changeTicketQuantity(ticketIndex, newQuantity) {
      this.$emit('update-ticket-quantity', {
        index: ticketIndex,
        quantity: newQuantity
      })
    },
    // 新增门票
    addTicket(newTicket) {
      this.$emit('add-ticket', newTicket)
    },
    // 删除门票
    deleteTicket(ticketIndex) {
      this.$emit('delete-ticket', ticketIndex)
    }
  }
}

父组件监听对应事件更新自身数据即可：

// parent.vue
export default {
  data() {
    return {
      tickets: [ 
        { name: "ticket 1", price: 20, quantity: 0 }, 
        { name: "ticket 2", price: 20, quantity: 0 },
      ]
    }
  },
  methods: {
    handleUpdateQuantity(payload) {
      this.tickets[payload.index].quantity = payload.quantity
    },
    handleAddTicket(newTicket) {
      this.tickets.push(newTicket)
    },
    handleDeleteTicket(index) {
      this.tickets.splice(index, 1)
    }
  }
}

该方案性能最优，无冗余深拷贝，也不会出现循环问题，符合Vue单向数据流设计原则。

方案2：带临时状态的全量同步（适用于需要暂存修改、支持取消的场景） #

如果子组件需要支持「修改后点击确认才同步到父组件」、「取消修改回滚到原有状态」的需求，确实需要维护本地副本，可通过状态锁避免循环，同时仅在用户确认提交时才触发同步，减少不必要的性能消耗：

// child.vue
export default {
  props: {
    tickets: Array
  },
  data() {
    return {
      _tickets: [],
      // 父组件更新prop时的锁标记，避免同步时触发回写
      isSyncingFromParent: false
    }
  },
  watch: {
    tickets: {
      handler(value) {
        this.isSyncingFromParent = true
        // 仅在父组件主动修改prop时才更新本地副本，cloneDeep可替换为自行实现的深拷贝方法
        this._tickets = cloneDeep(value)
        this.$nextTick(() => {
          this.isSyncingFromParent = false
        })
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 点击确认按钮才提交修改到父组件
    confirmChange() {
      this.$emit('update:tickets', cloneDeep(this._tickets))
    },
    // 点击取消按钮回滚本地修改
    cancelChange() {
      this._tickets = cloneDeep(this.tickets)
    }
  }
}

如果确实需要实时自动同步，可在_tickets的监听中加入锁判断即可：

watch: {
  // ... 其他watch逻辑
  _tickets: {
    handler() {
      if (!this.isSyncingFromParent) {
        this.$emit('update:tickets', cloneDeep(this._tickets))
      }
    },
    deep: true
  }
}

方案3：Vue3 v-model语法糖简化写法 #

Vue3中可配合v-model和computed的get/set简化逻辑，同样推荐配合细粒度修改使用：

<!-- parent.vue -->
<Child v-model:tickets="tickets" />

// child.vue
export default {
  props: ['tickets'],
  emits: ['update:tickets'],
  computed: {
    localTickets: {
      get() {
        return this.tickets
      },
      set(newVal) {
        this.$emit('update:tickets', newVal)
      }
    }
  }
}

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