Vue组件中如何取消用户属性更新并重置至初始值？

这个问题其实是Vue单向数据流规则的典型场景，咱们一步步来解决它：

首先，核心思路是永远不要直接修改props——Vue的props是单向绑定的，子组件只能读取不能修改，修改会触发你遇到的警告，而且父组件重新渲染时会覆盖子组件的修改。正确的做法是把props的值复制到子组件的本地data中，用本地数据来处理表单编辑，提交时再通知父组件更新数据。

具体实现步骤： #

1. 在组件中创建本地数据副本
   在组件的data选项里定义一个localUser，把props传入的user深克隆后赋值给它。这里用JSON.parse(JSON.stringify(this.user))做深克隆（如果你的user对象没有函数、日期这类特殊类型，这个方法足够用；如果有特殊类型，可以用lodash的cloneDeep或者自定义深克隆函数）。

2. 表单绑定本地数据
   把表单里的所有字段绑定到localUser，而不是原来的user props。

3. 修改提交逻辑
   提交时，把localUser通过$emit传给父组件，让父组件自己去更新它的user数据。

4. 实现取消重置逻辑
   点击取消时，重新把props的user深克隆后赋值给localUser，这样就回到初始状态了。

完整代码示例： #

<template>
  <form>
    <!-- 这里所有表单字段都绑定到localUser，示例如下： -->
    <input v-model="localUser.name" placeholder="Name">
    <input v-model="localUser.email" placeholder="Email">
    
    <button class="btn btn-primary" :disabled="!isDirty" @click.prevent="submit">Submit</button>
    <button class="btn btn-default" @click.prevent="cancel">Cancel</button>
  </form>
</template>
<script>
export default {
  props: ["user"],
  data() {
    return {
      // 初始化本地用户数据，深克隆props的user
      localUser: JSON.parse(JSON.stringify(this.user))
    };
  },
  computed: {
    // 计算属性判断是否有修改，用来控制提交按钮禁用状态
    isDirty() {
      return JSON.stringify(this.localUser) !== JSON.stringify(this.user);
    }
  },
  methods: {
    submit() {
      // 把本地修改后的数据emit给父组件
      this.$emit("formIsSubmitted", {...this.localUser});
    },
    cancel() {
      // 重置本地数据为props的初始值
      this.localUser = JSON.parse(JSON.stringify(this.user));
    }
  }
};
</script>

补充说明： #

• 关于isDirty计算属性：用JSON.stringify对比是简单的方式，如果你的user对象比较复杂，可以考虑更精细的对比方法，比如逐个字段检查。
• 深克隆的重要性：如果只用浅克隆（比如Object.assign({}, this.user)），当user有嵌套对象时，修改嵌套属性还是会影响到父组件的原始对象，因为嵌套对象还是引用传递。所以必须用深克隆来切断引用。
• 父组件需要监听formIsSubmitted事件，然后更新自己的user数据，示例如下：

  <!-- 父组件中使用子组件的地方 -->
  <UserUpdateForm :user="currentUser" @formIsSubmitted="updateUser"></UserUpdateForm>
  
  <script>
  export default {
    data() {
      return {
        currentUser: { name: "Tom", email: "tom@example.com" }
      };
    },
    methods: {
      updateUser(updatedUser) {
        this.currentUser = updatedUser;
        // 或者调用API更新后再同步本地数据
      }
    }
  };
  </script>
  

这样修改后，既符合Vue的单向数据流规则，又完美实现了取消按钮重置初始值的需求，不会再出现警告啦！

内容的提问来源于stack exchange，提问作者Tom Van Aken