根据调试工具看Vue源码之虚拟dom（一）

初次探索

什么是虚拟dom

Vue 通过建立一个虚拟 dom 对真实 dom 发生的变化保持追踪。请仔细看这行代码：

return createElement('h1', this.blogTitle)

createElement 到底会返回什么呢？其实不是一个实际的 dom 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，及其子节点。我们把这样的节点描述为“虚拟节点 (Virtual Node)”，也常简写它为“VNode”。“虚拟 dom”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

以上这段对虚拟dom的简短介绍来自Vue的官网

第一个断点

我们一开始的断点先打在app.vue的两个hook上：

export default {
    name: 'app',
    created () {
        debugger
    },
    mounted () {
        debugger
    }
}

刷新页面，此时调用栈中显示的函数跟预想中的不太一样：

在created这个hook执行之前，多出了一些比较奇怪的函数：

• createComponentInstanceForVnode
• Vue._update
• mountComponent