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

Question

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

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

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

  

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

Anybuddy能否进一步阐明哪个断言正确，即SFC是每个vue实例还是它们是单个根vue实例内的嵌套对象。如果证明后者是正确的情况，那么为什么每个人都可以拥有类似于根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实例内的对象。