Блог

В VueJS есть ли несколько однофайловых компонентов (как родительский-дочерний), каждый из которых является экземпляром vue, вложенным внутри корневого экземпляра? Почему у меня такое предположение, так это потому, что каждый компонент может иметь одинаковые свойства, т.е. data , methods template , mounted перехваты жизненного цикла ( created , , , и т.д.), Похожие на корневой экземпляр Vue или, скажем, на экземпляр vue в настройке, отличной от SFC.

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

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

В приложении может быть более одного экземпляра. Обычно у нас будет один экземпляр и несколько компонентов, поскольку экземпляр является основным приложением. src

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

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

Спасибо

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