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

Question

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

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

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

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

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

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

谢谢

Answer 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实例和嵌套对象。