在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>
<div id="app">
  <div @click="add">{{a}}</div>
</div>
<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]

阅读 17.6k
4 个回答

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

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

即可。

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

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

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

clipboard.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题