Vue组件中修改本地user对象时避免Prop（account.user）被篡改的方法

这个问题的核心原因是JavaScript的引用类型特性：你把this.account.user直接赋值给data里的user时，两个变量其实指向内存中的同一个对象。所以修改本地user的属性，自然会同步影响到父组件传过来的account.user。

要切断这种引用关系，你需要对account.user做一个深拷贝，生成一个完全独立的新对象，这样修改本地user就不会影响原prop了。下面给你几种常用的实现方式：

• 简单对象（无嵌套）：用对象展开运算符
  如果你user的结构比较简单，没有嵌套的对象或数组，直接用ES6的对象展开语法就能生成新对象：

  data: function() {
    return { 
      user: { ...this.account.user } 
    }
  }
  

• 复杂对象（有嵌套）：用JSON序列化/反序列化
  如果user里有多层嵌套的对象或数组，上面的方法只能做浅拷贝，这时候可以用JSON.parse(JSON.stringify())来实现深拷贝：

  data: function() {
    return { 
      user: JSON.parse(JSON.stringify(this.account.user)) 
    }
  }
  

  注意：这个方法无法处理函数、日期对象、正则表达式等特殊类型的数据，如果你的user包含这些类型，需要用专门的深拷贝工具函数（比如Lodash的_.cloneDeep）。

另外要提醒一下：Vue的prop是单向数据流，直接修改prop本身是不符合Vue设计规范的，所以你现在做本地拷贝的思路是完全正确的，这样既遵守了单向数据流原则，又能在子组件里独立处理表单数据。

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