VueJS:是多个单个文件组件,每个组件是一个vue实例还是嵌套对象?

时间:2019-03-19 08:01:53

标签: vue.js vuejs2

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

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

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

  

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

Anybuddy能否进一步阐明哪个断言正确,即SFC是每个vue实例还是它们是单个根vue实例内的嵌套对象。如果证明后者是正确的情况,那么为什么每个人都可以拥有类似于根vue实例的生命周期挂钩。

从技术上讲,Vue如何使SFC像单独的Vue实例一样起作用,但仍是单个根实例内的嵌套对象?

谢谢

1 个答案:

答案 0 :(得分:1)

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

第二,所有组件,包括“根组件”都是Vue实例。如果您查看源代码,您会看到根实例是通过缺少任何这样的父代来标识的:

const isRoot = !vm.$parent

使用vue devtools通过Vue应用查看此组件树:

enter image description here

这是控制台显示的内容:

> 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实例内的对象。