控制台打印对象时遇到的一个坑今天在一个VUE项目的调试过程中遇到了一个很奇怪的现象：在对一个对象添加新的属性前后分别在控

问题

今天在一个VUE项目的调试过程中遇到了一个很奇怪的现象：在对一个对象添加新的属性前后分别在控制台输出这个对象，结果发现显示的对象相同，都是添加新属性后的状态。用简单的代码表示如下：

<template>
  <div>
    <button @click="test">按钮</button>
  </div>
</template>

 <script>
export default {
  data() {
    return {
      obj: {a:1}
    };
  },
  methods: {
    test() {
      console.log(this.obj);
      this.obj.b=2
      console.log(this.obj);
    }
  }
};
</script>

在控制台打印的结果如下：

但是通过JSON.stringify(this.obj)打印之后，结果就不一样了：

说明前后的值其实是不一样，那这究竟是怎么回事呢？

原因

这涉及到了console的打印机制，当你在浏览器控制台点击对象展开时，浏览器才会去对象所在的堆内存中获取数据，再经过浏览器编译，展示在控制台。因此，当执行完毕后再去控制台查看对象就是执行后的对象了。