JS数据存储和深浅拷贝实际运用①

JavaScript分两种数据类型。
1.简单数据类型有：number, string, boolean, undefined和null
当声明一个简单数据类型的变量时，在内存中会把数据存在栈里。
2.复杂数据类型。Object

var student = new Person

当我创建一个实例的时候，会在内存中开辟一个空间，对象存放在堆里，student是一个内存地址，指向堆中的对象。

深拷贝和浅拷贝就是在存储复杂数据时产生的问题。

浅拷贝就是我只获取到了这个对象的内存地址，可以指向原对象。当我修改时，原对象也会改变。
深拷贝就是重新创建了一个空间，对象放在堆里，我修改原对象不影响我新创建的对象。

实际上在开发过程中，遇到了一个问题，就是有关于深浅拷贝的。

首先介绍一下开发背景。是一个后台管理项目。表格数据后有编辑页面，编辑页面与添加页面服用，利用了vue的父子传值，当我是添加时，父组件给子组件是一个空对象，当我是编辑时，传入当前表格一行的数据以对象的形式传给子组件。
子组件的方法

  // 打开弹窗
    dialogOpen() {
      console.log('打开页面',this.expert)
      this.$refs.form.resetFields();
      if (this.expert.id) {
        // 进入修改
         this.form = this.expert
      } else {
        this.form = {};
      }
    },

通过expert.id 判断是否是添加页面，如果是，把expert里的内容传给当前表单，如果不是，表单内容清空。

 props: {
    expert: Object,
    value: Boolean
  },

该组件接收的值

出现的问题就是：当我打开编辑弹窗后，并没有做任何修改关闭页面，列表页的当前列表数据变成空。

问题截图

出现原因：当我进入编辑页面时，this.form = this.expert 是浅拷贝，复制了对象的地址。当我点击添加时，在父组件中给this.expert ={},此时，this.form就是空的，再点击编辑，form也是空的了。

解决后的代码

  // 打开弹窗
    dialogOpen() {
      console.log('打开页面',this.expert)
      this.$refs.form.resetFields();
      if (this.expert.id) {
        // 进入修改
         this.form = {...this.expert}// 深拷贝
      } else {
        this.form = {};
      }
    },