一点关于学习Vue.nextTick产生的疑问

Question

var vm = new Vue({
    el: '#example',
    data: {
        message: '123'
    }
})

vm.message = 'new message'

console.log(vm.$el.textContent)

Vue.nextTick(function () {

    console.log(vm.$el.textContent)

})

在网上看了一些Vue.nextTick的说明，说是在下一个任务循环时（即DOM更新完毕后）进行操作，

以上代码打印出来是这个效果，的确是不一样的，

但是如果把代码改成

    var vm = new Vue({
        el: '#example',
        data: {
            message: '123'
        }
    })

    vm.message = 'new message'

    console.log(vm)
    // console.log(vm.$el)

    Vue.nextTick(function () {

        console.log(vm)
        // console.log(vm.$el)

    })

打印vm.$el 或者只打印vm的时候，在Chrome中开发者工具查看的时候里面的textContent就一样了

上面的:

下面的:

这是为什么呢？

Answer 1

在你使用chrome控制台查看的时候，点开属性的时候，Chrome才会去查询那个值的属性，你不信的话可以JSON.stringify(vm) 转成JSON字符串再看

Answer 2

控制台打印出来的是引用, vm 一直都是同一个对象, 所以你展开看到的内容是一样的. 你可以在第一个 log 语句打个断点 console.log(vm); debugger; 查看此时 vm 打印出来的值.

Answer 3

因为vm是一个 Object的引用 类型数据啊，vm指向的只是一个地址引用而已，实际数据都存放在堆中。

如果你的点击查看速度快过 机器运行，那么你是可以看到你想看的结果的。
实际上，你点击查看的时候，根据引用指向，值早就变了啊