我将axios响应存储到两个不同的“数据”变量中，如果我更改一个变量，它将自动更改其他变量

Question

在下面的html代码中，我只是迭代2个变量帖子和cp_posts：

HTML代码

  <div v-if="loading">
    loading...
  </div>
  <div v-else>
    <p style="background:#ebebeb" v-for="post in posts">
      {{post}}
    </p>

    <p style="background:#ebaaeb" v-for="post in cp_posts">
      {{post}}
    </p>
  </div>
</div>

在下面的Vue脚本中，我正在对一个axios调用演示URL来获取一些虚拟数据。一旦请求完成，我将响应数据存储到本地定义的变量即temp，之后我将temp分配给Vue数据变量posts和cp_posts。

在分配之后，我正在更改posts变量，就是这样。

const URL = 'https://reqres.in/api/users';
new Vue({
    el: '#app',
    data() {
    return {
        loading: true,
      posts: [], // add posts here so reactivity is working, also undefined would be OK
      cp_posts: []
    }
  },
  created() {
    //this.loading = true --> not needed already set in data
    axios.get(URL).then((response) => {
        // console.log(response.data, this)
      var temp = response.data.data
      this.posts = temp
      this.cp_posts = temp

      this.posts[0].id = 4444 // <== Here I'm changing value from posts variable which will change cp_posts
      this.loading = false
    })
  }
})

OUTPUT

你可以看到cp_posts变量==> id：4444也得到了变化，应该是1，因为我没有在上面的代码中触摸cp_posts变量

变量：帖子

{ "id": 4444, "first_name": "George", "last_name": "Bluth", "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" }

{ "id": 2, "first_name": "Janet", "last_name": "Weaver", "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg" }

{ "id": 3, "first_name": "Emma", "last_name": "Wong", "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg" }

变量：cp_posts

{ "id": 4444, "first_name": "George", "last_name": "Bluth", "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" }

{ "id": 2, "first_name": "Janet", "last_name": "Weaver", "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg" }

{ "id": 3, "first_name": "Emma", "last_name": "Wong", "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg" }

为什么cp_post变量在更改post变量时也会发生变化？

参考链接：https://jsfiddle.net/LokeshKhandare/31zvmcwp/2/

Answer 1

在posts和cp_posts，他们有temp的参考，使其变得可变。所以你能做的就是改变这条线

this.cp_posts=temp

至

this.cp_posts=JSON.parse(JSON.stringify(temp))

这将解决您的问题。 JSFiddle Link

Answer 2

cp_posts也被改变的原因是JS arrays和objects是引用类型值，这意味着它们引用了Memory中值的地址。如果您更改了值，则它们都会更改。我发现解决的一种方法是从这个medium post：

    //Deep Clone
    let a = [{ x:{z:1} , y: 2}];
    let b = JSON.parse(JSON.stringify(a));
    b[0].x.z=0
    console.log(JSON.stringify(a)); //[{"x":{"z":1},"y":2}]
    console.log(JSON.stringify(b)); // [{"x":{"z":0},"y":2}]