所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象
先说结论
这句话，这是官方文档说的
不过严谨来说，应该是
一个单页应用就是一个 vue 的实例
每个自定义组件就是一个 vueComponent 实例，
只不过 vueComponent 的构造器和 vue 的构造器的内容是基本一样的。效果表现也一致，两者对比如下
<div id="app">{{uname}}</div>
<script>
// 仅有Vue实例
var app = new Vue({
el: "#app",
data() {
return {
uname: "小红",
};
},
methods: {
say() {
console.log("调用了say方法");
},
},
mounted() {
this.say();
},
});
</script>
<div id="app"></div>
<script>
// 组件
const RootCmp = {
data() {
return {
uname: "小红",
};
},
methods: {
say() {
console.log("调用了say方法");
},
},
mounted() {
this.say();
},
template: "<div>{{uname}}</div>",
};
var app = new Vue({
el: "#app",
render: (h) => h(RootCmp),
});
</script>
证明
我们创建个 vue 项目
<div id="app">
{{ message }}
<cmp-one></cmp-one>
------
<cmp-two></cmp-two>
</div>
<script>
// 全局组件
Vue.component("CmpOne", {
template: "<div>组件1</div>",
});
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue!",
},
components: {
CmpTwo: {
// 局部组件
template: "<div>组件2</div>",
},
},
});
</script>
然后开始分析源码
以下是 vue.js 部分代码，
我们很快找到 Vue 的类，并添加个 log
function Vue(options) {
console.log("Vue构造类");
if (!(this instanceof Vue)) {
warn("Vue is a constructor and should be called with the `new` keyword");
}
this._init(options);
}
结果发现，Vue 构造函数只会被执行一次，也就是你手动 new 的时候。
这足以证明每个组件（或.vue）文件不是 Vue 的实例。
那组件是谁的实例呢？
我们继续看源码,通过代码分析我们得知
全局组件 or 局部组件的注册初始化，是走这里
...
var Sub = function VueComponent (options) {
console.log('VueComponent组件的构造类');
this._init(options);
};
...
// 其中vnode.componentOptions.Ctor就是VueComponent类
new vnode.componentOptions.Ctor(options);
如上代码中，VueComponent组件的构造类会被打印两次。
这也就是说，它才是组件实例的构造函数（类）。
源码稍微深度分析
Vue.extend = function (extendOptions, is) {
var Super = this;
// ...
var Sub = function VueComponent(options) {
console.log("VueComponent组件的构造用来 实例化");
this._init(options);
};
Sub.prototype = Object.create(Super.prototype);
Sub.prototype.constructor = Sub;
// ...
return Sub;
};
function initAssetRegisters(Vue) {
// ...
ASSET_TYPES.forEach(function (type) {
Vue[type] = function (id, definition) {
if (!definition) {
return this.options[type + "s"][id];
} else {
if (type === "component" && isPlainObject(definition)) {
definition.name = definition.name || id;
definition = this.options._base.extend(definition);
}
return definition;
}
};
});
}
function initGlobalAPI(Vue) {
// ...
initAssetRegisters(Vue);
}
initGlobalAPI(Vue);
解读：
项目初始化进来的时候会执行一个全局方法 initGlobalAPI
initGlobalAPI里会调用initAssetRegisters
initAssetRegisters的作用是给你定义的一些全局Asset扩展一些属性
枚举ASSET_TYPES 就是全局Asset：包含 component,directive,filter
比如我的组件 CmpOne,原本只有 template 属性，经过扩展后，就会多出如下属性
{
cid: 1
component: ƒ ( id, definition )
directive: ƒ ( id, definition )
extend: ƒ (extendOptions, is)
extendOptions: {template: '<div>组件1</div>', name: 'CmpOne', _Ctor: {…}}
filter: ƒ ( id, definition )
mixin: ƒ (mixin)
options: {components: {…}, directives: {…}, filters: {…}, template: '<div>组件1</div>', _base: ƒ, …}
sealedOptions: {components: {…}, directives: {…}, filters: {…}, template: '<div>组件1</div>', _base: ƒ, …}
super: ƒ Vue(options)
superOptions: {components: {…}, directives: {…}, filters: {…}, _base: ƒ}
use: ƒ (plugin)
}
其中重要的一点就是给CmpOne组件指定了构造器
那是怎么指定的呢？
this.options._base.extend(definition);
这句代码本质上就是调用了Vue.extend来创建了一个Vue的子类。
那么情况就明了了，组件构造函数是继承自Vue构造。
最后vue在创建vdom的时候，就会去实例化组件类，即new VueComponent()
总结
Vue组件构造类是继承自Vue类- 它们的属性options也基本是一样的，Vue 实例会比 Vue 组件多出 el 和 router 属性（对应官方说辞：组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。）
所有的Vue组件都是Vue实例这句话只是官方为了方便咱们理解，但严格来说并不对,严格来说应该是所有的Vue组件都是Vue的子类实例- 在多页应用下或vue2的
Vue.extend和vue3的createApp,才会形成多个Vue实例
扩展
Vue.component和Vue.extend的联系:
Vue.component注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称，如上id就是组件名CmpOne，内部实质上调用了Vue.extend,最后返回"子类"(构造器),这个子类构造器。