What is the difference between vue instances and components?

I printed this in the created life cycle of the root component and the component
Root component goes like this:
clipboard.png
:
clipboard.png
vueVueVue
clipboard.png
I am confused. May I ask

1, the relationship between components and vue instances, and the difference
2. Is there only one Vue instance for a spa?

Mar.11,2021

can basically be regarded as a thing, and that's what the document says, and components are instances. All instances in the same environment share a self-incremented _ uid number.

generally I divide components into three categories:

  1. the root component, which can contain subcomponents inside, is the top layer of the entire component tree.
  2. subcomponents, which are not the uppermost components, but can also contain lower-level subcomponents internally.
  3. Free components: mount new instances to body outside the component tree by new Vue (''). $mount (xx) (a lot of notifications and pop-up components are implemented in this way). It is generally temporary in nature, and the interior can contain subcomponents, but only simple functions and structures are actually at the top of the widget tree itself.

what about SPA?

  • SPA is just a single html application that does not actually jump. There is no fixed relationship between the html applied to SPA on a single page and the number of components, regardless of whether the component is Vue , React or your own implementation.
  • generally our implementation is to write a -sharpapp or -sharproot element in the page to mount a root component APP , and then use router-view or v-if in this root component to build the SPA structure. During the construction process, a component tree with APP as the root component is formed.
  • in this case, we can say that our SPA has only one root component .
  • but when we use the pop-up window or notify component when we use the third-party library, you will find that they are added to body through append , and do not belong to the APP root component structurally, so can we say that there are multiple root components at this time?
  • at the same time, when building our SPA, you can split it into several parallel -sharproot1 , -sharproot2 disorganization structures at the html level.
Menu