search

Home  >  Q&A  >  body text

javascript - In vue, why are the values ​​output by console.log affected by the statements after console.log, and how to avoid this effect

In vue, why does the value output by console.log(a) be affected by the statements after console.log(a), and how to avoid this impact

Logically speaking, the values ​​output by console.log twice should be different. Why are they the same? Only the two output values ​​​​can not interfere with each other

<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
  <p @click="add">{{a}}</p>
</p>
<script>
new Vue({
  el: '#app',
  data: {
    a:[]
  },
  methods:{
    add:function(){
      console.log(this.a);
      this.a.push(1);
      console.log(this.a);

    }
  }
})
</script>
</body>
</html>"


![图片描述][1]
欧阳克欧阳克2777 days ago1347

reply all(4)I'll reply

  • 高洛峰

    高洛峰2017-06-15 09:24:41

    This is a feature of debug control. What console.log outputs is not a snapshot of the object. You can try it on the console

    reply
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-06-15 09:24:41

    My understanding is that this a is an array; just like an object, the memory address is accessed to view.
    Because at work, I often use chrome console.logWhen I click on an object in the debugger, the content inside is basically the same, but on the surface it can be seen that the results before and after are different;
    However, break the point and debug will find out There is a difference between before and after the change.
    Picture above

    reply
    0
  • 習慣沉默

    習慣沉默2017-06-15 09:24:41

    It’s not the same, I just copied your code directly, and it’s still the same after running it~
    After adding, the a is obviously one more

    reply
    0
  • 天蓬老师

    天蓬老师2017-06-15 09:24:41

    Here’s a light-hearted solution:

    console.log(JSON.stringify(data, null, 2))

    That’s it.

    reply
    0
  • Cancelreply