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]
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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
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
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
Here’s a light-hearted solution:
console.log(JSON.stringify(data, null, 2))That’s it.