JS - console.log 输出对象时的问题
2018-09-30 本文已影响0人
恒星的背影
今天遇到的一个问题，代码如下：
<body>
<div id="app">
<div class="test" :class="name">{{name}}</div>
</div>
<script>
var app = new Vue({
el: '#app',
mounted() {
this.name = 'bbb'
const dom = document.querySelector('.test')
console.log(dom, dom.className)
},
data: {
name: 'aaa'
}
})
</script>
</body>
获取 Dom 元素时，视图还没有更新，所以输出的结果应该是 'aaa'
实际输出结果：
<div class="test bbb">bbb</div> "test aaa"
前面为什么会输出 bbb ?
这个结果是无论如何都解释不清的，经过群里请教他人，得出结论如下：
是浏览器控制台的问题，控制台打印对象是不准确的
比如：
let obj = {a: 1}
console.log(obj)
obj.a = 2
输出结果：
嗯，薛定谔的对象，两种状态叠加
还有一个技巧，可以用 JSON.stringify 打印，经过本人试验，可以打印出预期的结果
