VueJS：多个单个文件组件是每个 vue 实例还是嵌套对象？答案

【问题标题】：VueJS: are multiple Single file components each a vue instance or nested objects?VueJS：多个单个文件组件是每个 vue 实例还是嵌套对象？
【发布时间】：2019-08-09 16:30:32
【问题描述】：

在 VueJS 中，是否有多个单文件组件（作为父子），每个都是嵌套在根实例中的 vue 实例？为什么我有这个假设，是因为每个组件可以具有相同的属性，即data、methods、template、生命周期挂钩（mounted、created 等）类似于根 Vue 实例或就像非 SFC 设置中的 vue 实例一样。

在我看来，任何 web-pack + vue-loader 单文件组件设置都是作为 JS 对象导出并导入父组件的嵌套对象，即子组件嵌套在父组件中，父组件嵌套在单个根 vue 实例中。

基本上，简单地说，只有一个根实例，SFC 是嵌套对象。正如 Sarah Drasner 在下面链接的 css-tricks 文章中所写：

您可以在一个应用程序中拥有多个实例。通常，我们会有一个实例和几个组件，因为实例是主应用程序。 src

anybuddy 能否更清楚地说明哪个断言是正确的，即 SFC 是每个 vue 实例，或者它们是单个根 vue 实例中的嵌套对象。如果后者被证明是正确的情况，为什么每个都可以有类似于根 vue 实例的生命周期钩子。

从技术上讲，Vue 如何使 SFC 像单独的 Vue 实例一样工作，但仍然是单个根实例中的嵌套对象？

谢谢

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

首先，“单文件组件”和“全局组件”在属性和生命周期挂钩方面没有区别。它们的区别仅在于它们的打包方式、其他组件如何引用它们以及它们的 HTML 模板的存储方式/位置。

其次，所有组件，包括“根组件”都是 Vue 实例。如果您查看源代码，您会看到根实例是由缺少任何父实例来标识的：

const isRoot = !vm.$parent

使用 vue devtools 从 Vue 应用程序查看此组件树：

这是控制台显示的内容：

> var root = $vm0
> var app = $vm0.$children[0]
> var link = $vm0.$children[0].$children[0]

// How they are named in vue dev tools
> link.$options._componentTag
< "router-link"
> app.$options.__file
< "src/App.vue"

// How the root instance is identified
> !root.$parent
< true
> !app.$parent
< false
> !link.$parent
< false

// Constructors
// Each component has its own class (or prototype), but they all extend the Vue base class
> Object.getPrototypeOf(root) === Object.getPrototypeOf(Object.getPrototypeOf(app))
< true
> Object.getPrototypeOf(root) === Object.getPrototypeOf(Object.getPrototypeOf(link))
< true

因此，组件都是 vue 实例和嵌套在单个根 vue 实例中的对象。

【讨论】：