vue实例和组件的区别？

Question

我在根组件和组件的created生命周期分别打印了this
根组件是这样的：

组件是这样的：

但是看vue官方文档说所有的Vue组件都是Vue实例

我很懵...想请问一下

1、组件和vue实例的关系以及区别
2、一个spa只有一个Vue实例吗？

Answer 1

基本可以当作一个东西，文档也是那么说的，组件都是实例。所有同个环境下的实例公用自增的 _uid 编号。

一般我把组件分为三种：

1. 根组件，内部可以含有子组件，是整个组件树的最上层。
2. 子组件，非最上层的组件，当然内部也可以包含更低层的子组件。
3. 游离组件：通过 new Vue('').$mount(xx) 的方式向组件树之外的 body中挂载新的实例（很多通知、弹窗性的组件都是这么实现的），一般是临时性质的，内部可以包含子组件，但是只有简单的功能和结构，其实也是本身这个小组件树的最上层。

那么 SPA 呢？

• SPA 只是不发生实际跳转的单 html 的应用，单页应用 SPA 的 html 跟组件的个数并没有固定的关系，不管这个组件是 Vue、React 还是你自己实现的。
• 一般我们的实现是在页面中写一个 #app 或 #root 元素去挂载一个根组件 APP，然后在这个根组件内使用 router-view 或 v-if 等去构建 SPA 的结构，构建的过程中就形成了以 APP 为根组件的组件树。
• 这中情况下可以说我们的 SPA 只有一个根组件。
• 但是我们使用第三方库的时候，用到弹窗或通知组件时，你会发现他们是通过 append 的方式被添加到 body 的，在结构上是不属于 APP根组件的，那么这个时候我们能不能说有多个根组件呢？
• 同时，在构建我们的 SPA 时，你也可以在 html 层面拆分成多个并列的#root1，#root2 去组织结构。