vue中深拷贝浅拷贝实际测试

单层的使用{...}和Object.assign
复杂的对象使用

JSON.parse(JSON.stringify(........))

 

export default {
  name: 'HelloWorld',
  data () {
    return {
      a: '',
      b: '',
      c: ''
    }
  },
  methods: {
    test1 () {
      const a = { aa: '11' }
      this.a = a
      a.aa = 'cc' // 一起变了
    },
    test2 () {
      const b = { bb: '11' }
      this.b = JSON.parse(JSON.stringify(b))
      b.bb = 'bcc' // 没有一起变
    },
    test3 () {
      const c = { cc: '11', ca: [{ aa: '11' }] }
      this.c = { ...c }
      c.cc = 'ccc' // 这个值没有变
      c.ca[0].aa = 'caa' // 这个值一起变了
    },
    test4 () {
      const c = { cc: '11', ca: [{ aa: '11' }] }
      this.c = JSON.parse(JSON.stringify(c))
      c.cc = 'ccc' // 没有一起变
      c.ca[0].aa = 'caa' // 没有一起变
    },
    test5 () {
      const c = { cc: '11', ca: [{ aa: '11' }] }
      this.c = Object.assign({}, c)
      c.cc = 'ccc' // 这个值没有变
      c.ca[0].aa = 'caa' // 这个值一起变了
    }
  }
}