VueJS: каждый из нескольких файловых компонентов - это экземпляр vue или вложенные объекты?

Question

В VueJS есть несколько компонентов Single file (как parent-child), каждый экземпляр vue вложен в корневой экземпляр? Это предположение объясняется тем, что каждый компонент может иметь одинаковые свойства, например data, methods, template, перехватчики жизненного цикла (mounted, created и т. Д.), Сродни корневому экземпляру Vue или скажем, как экземпляр vue в настройке без SFC.

Мне кажется, что любая установка отдельных файловых компонентов web-pack + vue-loader - это вложенные объекты, экспортируемые как объекты JS и импортируемые в родительский компонент, т.е. дочерний объект вложен в родительский компонент, который вложен в один корневой экземпляр vue.

Проще говоря, существует только один корневой экземпляр, а SFC - это вложенные объекты. Как пишет Сара Драснер в следующей статье css-tricks:

В приложении может быть несколько экземпляров. Как правило, у нас будет один экземпляр и несколько компонентов, поскольку этот экземпляр является основным приложением. ЦСИ

Может ли кто-нибудь еще пролить свет на то, какое утверждение является правильным, т. Е. Каждый SFC - это экземпляры vue или они являются вложенными объектами внутри одного корневого экземпляра vue. Если последнее оказывается правильным случаем, почему каждый может иметь хуки жизненного цикла, сродни корневому экземпляру vue.

Технически, как Vue заставляет SFC действовать как отдельные экземпляры Vue, но все же быть вложенными объектами внутри одного корневого экземпляра?

Спасибо

Answer 1

Прежде всего, нет разницы между «компонентами одного файла» и «глобальными компонентами», когда речь заходит об их свойствах и хуках жизненного цикла.Они отличаются только тем, как они упакованы, как на них ссылаются другие компоненты и как / где хранится их HTML-шаблон.

Во-вторых, все компоненты, включая «корневой компонент», являются экземплярами Vue.Если вы посмотрите на исходный код, то увидите, что корневой экземпляр идентифицируется по отсутствию каких-либо родителей, например:

const isRoot = !vm.$parent

Посмотрите на это дерево компонентов из приложения Vue, используя vue devtools:

Вот что показывает консоль:

> 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.