首页  >  问答  >  正文

javascript - 在vue中,有console.log输出的值为什么会受到console.log之后语句的影响,如何避免这种影响

在vue中,有console.log(a)输出的值为什么会受到console.log(a)之后语句的影响,如何避免这种影响

两次console.log输出的值按理来说应该是不一样的 ,为什么会一样呢?两次输出的值才能互相不干扰

<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]

欧阳克欧阳克2685 天前1282

全部回复(4)我来回复

  • 高洛峰

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

    这是debug控制的特性,console.log输出的不是object的一个snapshot。你可以在控制台试一试

    回复
    0
  • 曾经蜡笔没有小新

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

    我的理解,因为这个a是数组;跟对象一样,都是访问内存地址查看。
    因为工作中,经常用chrome console.log一个对象,在调试器点开,里面内容基本一样,但表面可以看出前后结果是不一样的;
    但是,打断点,debug就会发现改变之前,和之后是不一样的。
    上图

    回复
    0
  • 習慣沉默

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

    并没有一样啊,我就是把你的代码直接复制,运行了都没有一样啊~
    添加后的a明明多1了呢

    回复
    0
  • 天蓬老师

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

    这里给出一种轻松愉快的解决方案:

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

    即可。

    回复
    0
  • 取消回复