深拷贝与浅拷贝-通俗易懂

哈喽，宝宝们~

最近项目不是很紧张，姐妹儿就给大家多分享一下有用的东西，今天跟大家说说深拷贝与浅拷贝的区别！！！

情景描述

情景描述.png

• tableData 数据是列表中显示的数据，options 为添加菜单弹框中上级菜单的数据信息；
• 现在要将 tableData 中的数据赋值给 options，并且在 options 中添加一条数据时不能影响 tableData 的改变；

一、浅拷贝

普通的变量赋值一般都是浅拷贝

// 添加菜单按钮
    creat() {
      // 打开添加菜单窗体
      this.dialogFormVisible = true
      this.dailogTitle = '添加菜单'
      // this.$nextTick()这就是我上一篇讲到的：https://www.jianshu.com/p/1cc770b13058
      this.$nextTick(() => {
        this.form = {}
        this.$refs.ruleForm.resetFields()
      })

      console.log('赋值之前的options，tableData', this.options, this.tableData) // 没赋值之前的 tableData

      浅拷贝
      this.options = this.tableData;
      this.options.unshift(this.NoParent) // 要往this.options里向前添加一个数据unshift()
      console.log('浅拷贝之后的options',this.options,'浅拷贝之后的tableData',this.tableData)
    },

浅拷贝后的数组数据变化.png

• 通过以上的代码以及图片的展示，可以很明显看出 options 通过赋值后向前添加了一个“无”的数据，此时 tableData 中的数据也同样添加了一个“无”的数据，tableData 也受到了options 变化的影响！！！
• 此时对 options 来说就是浅拷贝~~~

那么如何做到不影响原数据信息呢，接下来我们来看深拷贝

二、深拷贝

浅拷贝是你，深拷贝就是另外一个你，和你没有任何关系，除了一摸一样外~~~

// 添加菜单按钮
    creat() {
      // 打开添加菜单窗体
      this.dialogFormVisible = true
      this.dailogTitle = '添加菜单'
      // this.$nextTick()这就是我上一篇讲到的：https://www.jianshu.com/p/1cc770b13058
      this.$nextTick(() => {
        this.form = {}
        this.$refs.ruleForm.resetFields()
      })

      console.log('赋值之前的options，tableData', this.options, this.tableData) // 没赋值之前的 tableData

      // 深拷贝
      this.options = JSON.parse(JSON.stringify(this.tableData))
      this.options.unshift(this.NoParent)
      console.log('深拷贝之后的options', this.options, '深拷贝之后的tableData', this.tableData)
    },

深拷贝之后的数组数据变化.png

• 通过以上的代码以及图片的展示，可以很明显看出 options 通过赋值后向前添加了一个“无”的数据，此时 tableData 中的数据并没有受到options 变化的影响！！！
• 此时对 options 来说就是深拷贝~~~

---

• 这样的话，你怎么处理 options 都不会影响到原 tableData 数据结构！

好了，小伙伴儿们，今天姐妹儿就给大家分享到这里啦，希望可以帮助到大家！！！