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

短命女 2022-10-05 09:53 147阅读 0赞

## 直接上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>

### 会发生什么情况呢 看图片 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 1]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 2]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 3]

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

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

#### 解决办法： ####

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70]: /images/20221005/30b1ce16dcd34040b79f9144f2bf40dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 1]: /images/20221005/3f99ccb431094c8291a3184c26673791.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 2]: /images/20221005/226cad2ebc094980b460252cc151a727.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 3]: /images/20221005/dccda396cfc4438c90777555251dfd11.png