对象拷贝（二）浅拷贝

浅拷贝

首先看一个vue的例子

  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <div id="app">
    <form @submit.prevent="insert">
      <input type="text" v-model="student.name">
      <input type="text" v-model="student.age">
        <button>添加</button>
    </form>
    <ul>
      <li v-for="item in list">
        姓名：{{item.name}}
        年龄：{{item.age}}
      </li>
    </ul>
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        student:{
          name:"",
          age:""
      },
      list:[]
    },
    methods: {
      insert(){
        this.list.push(this.student)
      }
    }
  })
  </script>

首先添加几个相同的数据
例如：
小明 2
小明 2
小明 2
小明 2
当改变输入框中的内容后
如：
小红 3
那么之前的数据就会变成
小红 3
小红 3
小红 3
小红 3
这是因为data中数据student是对象，引用类型的地址存储在栈中，
引用类型的数据存储在堆中，提交的数据对应的都是同一个地址，因此改变一个就会全部改变。

解决方案

浅拷贝

  let obj = {
    name: "小明",
    age: 2
  }
  function copy(obj){
    let newObj = {}
    for(let i in obj){
      newObj[i] = obj[i]
    }
    return newObj
  }
  let newObject = copy(obj)
  obj.name = "小红"
  console.log(obj) // {name:"小红",age:2} 
  console.log(newObject) // {name:"小明",age:2}

完整解决的方法就是在vue中添加一个浅拷贝的方法，再将拷贝的副本传到数组中去

  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <div id="app">
    <form @submit.prevent="insert">
      <input type="text" v-model="student.name">
      <input type="text" v-model="student.age">
        <button>添加</button>
    </form>
    <ul>
      <li v-for="item in list">
        姓名：{{item.name}}
        年龄：{{item.age}}
      </li>
    </ul>
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        student:{
          name:"",
          age:""
      },
      list:[]
    },
    methods: {
      insert(){
        this.list.push(
          this.copy(this.student)
        )
      },
      copy(obj){
        let newObj = {}
        for(let i in obj){
          newObj[i] = obj[i]
        }
        return newObj
      }
    }
  })
  </script>