在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实例一样起作用,但仍是单个根实例内的嵌套对象?
谢谢
答案 0 :(得分: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实例内的对象。