Vue Component原理分析

Component的创建主要分为了两个流程

1. 创建组件VNode
2. 挂载组件DOM

<div>
    <test></test>
</div>

上面这个页面被解析成了一个渲染函数

function() {
    with(this) {
        return _c('div', [
            _c('test')
        ])
    }
}

以上渲染函数执行得到模板对应的VNode，得到VNode之后，就会根据VNode创建DOM，然后进行挂载。此时Vue需要递归遍历VNode，进行DOM树的生成。

1. 页面解析模板得到VNode时：创建组件构造函数+生成外壳节点保存父子关联的数据
2. 页面开始挂载DOM时，新建组件实例，解析组件内部模板，生成DOM挂载到父页面