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

最新推荐文章于 2024-10-18 14:34:21 发布

原创最新推荐文章于 2024-10-18 14:34:21 发布 · 230 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

23 篇文章

订阅专栏

单层的使用{...}和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' // 这个值一起变了
    }
  }
}