搜尋

首頁  >  問答  >  主體

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]

欧阳克欧阳克2728 天前1321

全部回覆(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
  • 取消回覆