> For the complete documentation index, see [llms.txt](https://2239559319.gitbook.io/jing-tong-vue3-yuan-ma/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2239559319.gitbook.io/jing-tong-vue3-yuan-ma/2-yuan-ma-gai-shu/datastructure.md).

# 2.2 基本数据结构

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

## component

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

![](https://119282184-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL3nFbRDeBVqSpGq54WLW%2Fuploads%2Fgit-blob-49c39d539f49de148e6eefcbb6880b82f9d38674%2Foptions-component.png?alt=media)

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

![](https://119282184-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL3nFbRDeBVqSpGq54WLW%2Fuploads%2Fgit-blob-8a96b3c875fb7bb98087c5a7000b87570c206e72%2Fcomposite-componet.png?alt=media)

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

## app

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

app具有以下结构

![](https://119282184-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL3nFbRDeBVqSpGq54WLW%2Fuploads%2Fgit-blob-0f00d817f0d4de155ba0b015f07b482e267b20c5%2Fapp.png?alt=media)

## component instance

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

`component instance`具有以下结构

![](https://119282184-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL3nFbRDeBVqSpGq54WLW%2Fuploads%2Fgit-blob-84ec4450ff4bc253248d75b3c391fbda5a668501%2Fcomponent-instance.png?alt=media)

## vnode

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

![](https://119282184-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL3nFbRDeBVqSpGq54WLW%2Fuploads%2Fgit-blob-ab525c27dcc89584aca1152c7028979fa1e5b9d6%2Fvnode.png?alt=media)

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

## container

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

## 依赖图

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

![数据结构依赖图](https://119282184-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL3nFbRDeBVqSpGq54WLW%2Fuploads%2Fgit-blob-ad59e9b7a6eae7c80a585bcca77e4386ff0be3a7%2Fdara-graph.png?alt=media)

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