如何在组件内部处理变化的props？——Form wrapper中data object prop的非mutate、非深拷贝替代方案咨询

我之前在开发类似的表单封装组件时也遇到过这个棘手的问题——既要遵守Vue的单向数据流规范（不直接修改prop），又要避免深拷贝带来的性能开销。这里有几个经过实践验证的方案，你可以根据场景选择：

1. 使用Proxy代理数据（推荐） #

利用ES6的Proxy API，我们可以在不修改原始prop对象的前提下，拦截数据的变更操作，然后通过emit把变更后的路径和值传递给父组件，由父组件负责更新原始数据。这种方式不需要拷贝整个对象，只在实际修改时触发更新，性能友好，还能天然支持嵌套对象。

举个简单的实现示例：

// 子组件（Form Wrapper）
export default {
  props: {
    model: {
      type: Object,
      required: true
    }
  },
  setup(props, { emit }) {
    // 创建代理，拦截set操作
    const createProxy = (target) => {
      return new Proxy(target, {
        set(obj, key, value) {
          // 避免无意义的重复更新
          if (obj[key] === value) return true;
          
          // 生成新对象（仅修改当前层级的属性）
          const updatedObj = { ...obj, [key]: value };
          // 如果是嵌套对象，递归代理子对象，确保深层变更也能被拦截
          if (typeof value === 'object' && value !== null) {
            updatedObj[key] = createProxy(value);
          }
          
          emit('update:model', updatedObj);
          return true;
        },
        // 拦截get操作，确保嵌套对象被代理
        get(obj, key) {
          const value = obj[key];
          return typeof value === 'object' && value !== null ? createProxy(value) : value;
        }
      });
    };

    const proxyModel = createProxy(props.model);
    return { proxyModel };
  }
}

父组件使用时只需监听事件更新原始数据：

<!-- 父组件 -->
<FormWrapper :model="formData" @update:model="newData => formData = newData" />

这种方式的核心是只在修改的节点做局部更新，父组件更新时的浅拷贝仅作用于当前修改的层级，性能开销远低于深拷贝整个大对象。

2. 采用"局部状态+差分更新"模式 #

在子组件内部维护一个局部状态，但不是完全拷贝整个prop，而是只记录用户修改过的字段（差分）。当用户修改表单时，只更新局部状态中的对应字段，同步回父组件时再将局部差分与原始prop合并后emit。

示例代码：

// 子组件
export default {
  props: {
    model: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      localChanges: {} // 仅存储修改过的字段，支持嵌套结构
    };
  },
  computed: {
    // 合并原始数据与局部修改，供表单渲染使用
    formModel() {
      // 嵌套合并逻辑可以用lodash.merge或自定义递归函数
      return merge({}, this.model, this.localChanges);
    }
  },
  methods: {
    handleFieldChange(path, value) {
      // 将路径（如['user', 'name']）转化为局部状态的嵌套赋值
      let target = this.localChanges;
      for (let i = 0; i < path.length - 1; i++) {
        const key = path[i];
        target[key] = target[key] || {};
        target = target[key];
      }
      target[path[path.length - 1]] = value;

      // 同步给父组件
      this.$emit('update:model', merge({}, this.model, this.localChanges));
    }
  }
}

这个方案适合表单字段层级不深的场景，优势是实现简单，内存占用极低——只有修改过的字段会被存储。

3. 使用Immer生成结构化共享的不可变数据 #

Immer是轻量级工具库，它允许你用"可变"的写法生成不可变数据，内部通过结构化共享复用原始对象未修改的部分，避免了全量深拷贝的性能损耗。

示例：

import { produce } from 'immer';

// 子组件中处理字段变更
const handleFieldChange = (path, value) => {
  const newModel = produce(props.model, draft => {
    // 直接修改draft，Immer会自动生成不可变的新对象
    let target = draft;
    for (let i = 0; i < path.length - 1; i++) {
      target = target[path[i]];
    }
    target[path[path.length - 1]] = value;
  });
  emit('update:model', newModel);
};

Immer的优势是写法直观，不需要手动处理对象合并和嵌套更新，对于大型表单也能保持较好的响应速度，是开发效率与性能的平衡选择。

总结 #

• 追求原生无依赖且性能最优：优先选Proxy方案，完美支持嵌套对象且无多余拷贝；
• 表单结构简单、字段层级浅：局部差分模式实现成本最低；
• 想兼顾开发效率与性能：Immer是省心的选择，语法糖能减少大量样板代码。

这些方案都能严格遵守单向数据流规范，同时最大程度降低性能损耗，解决你提到的核心矛盾。

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