2.2 基本数据结构

基本数据结构是在运行中常用的数据结构。

component

常说的组件是import HelloWorld from './helloworld.vue'中的HelloWorld。在使用webpack和vue-loader时，这里导入的组件会被vue-loader自动处理。对于Options API的组件来讲，这里以demo中的App.vue来讲，具有以下结构

对于composite setup的组件来讲，具有一下结构

总结起来就是component是经过编译器处理后得到的产物。具有一定结构

app

一个app是createApp函数的返回值，第一个参数是根组件。第二个参数可选，它是要传递给根组件的 props。根组件就是上面所说的component

app具有以下结构

component instance

component instance表示在运行过程中创建好的component，和component的区分是component只是编译后的一个对象，这个对象不需要vue的创建就可以单独存在，而component instance是vue在渲染过程中创建的内部对象，用以渲染的用途

component instance具有以下结构

vnode

这个不多讲官网文档里面有。vnode是渲染算法的核心结构。type=component的vnode具有以下结构

vnode还有其他很多种结构这里不列出

container

app.mount函数的第一个参数是container，类型为Element

依赖图

对于type=component的vnode来讲，以上数据结构具有如下的关系

数据结构依赖图

图中的container相关依赖仅为根组件具有，其他component不具有