问题五：一个对象push到数组中此时改变原对象数组中的数据也会被修改是为什么

直接上domo

<template>
  <div class="">
    <form action="">
      <p>姓名：<input type="text" v-model="user.name" /></p>
      <p>年龄：<input type="text" v-model="user.age" /></p>
      <p>爱好：<input type="text" v-model="user.like" /></p>
      男：<input type="radio" name="sex" value="男" v-model="user.sex" />
      女：<input type="radio" name="sex" value="女" v-model="user.sex" />
      <p>{{ user }}</p>
      <button @click.prevent="addPushData">添加</button>
      <ul>
        <li v-for="(item, index) in users" :key="index">
          <span>{{ item.name }}</span
          >===<span>{{ item.age }}</span
          >====<span>{{ item.sex }}</span
          >===<span>{{ item.like }}</span>
        </li>
      </ul>
    </form>
  </div>
</template>
<script>
export default {
  data () {
    return {
      user: {
        name: '',
        age: '',
        sex: '',
        like: ''
      },
      users: []
    }
  },
  methods: {
    addPushData () {
      this.users.push(this.user)
    }
  }
}
</script>
<style lang='scss' scoped>
</style>

会发生什么情况呢 看图片

现在我正常的把一条数据push到了users的数组中，然后再去修改（姓名、年龄、爱好、性别的输入框和单选框）

奇怪的事情发生了，张三全部变成了张，年龄18全变成了1，性别男全部变成了女… 我们再多push几条试一试

此时我多push了几条数据，我们再来修改试一试

此时出现的情况也已经显而易见了

原因：对象是引用类型，传递的是引用地址，所以你两个数组引用的是同一个对象，只要其中一个数组改变，就会导致对象改变，进而另一个引用的数组也会改

解决办法：

this.users.push(JSON.parse(JSON.stringify(this.user)))