vue中的一个组件就是一个vue实例吗?


所有的 Vue 组件都是 Vue 实例,并且接受相同的选项对象

先说结论

这句话,这是官方文档说的
不过严谨来说,应该是

一个单页应用就是一个 vue 的实例
每个自定义组件就是一个 vueComponent 实例,

只不过 vueComponent 的构造器和 vue 的构造器的内容是基本一样的。效果表现也一致,两者对比如下

{{uname}}

证明

我们创建个 vue 项目

{{ message }} ------

然后开始分析源码

以下是 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: '
组件1
', name: 'CmpOne', _Ctor: {…}} filter: ? ( id, definition ) mixin: ? (mixin) options: {components: {…}, directives: {…}, filters: {…}, template: '
组件1
', _base: ?, …} sealedOptions: {components: {…}, directives: {…}, filters: {…}, template: '
组件1
', _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,最后返回"子类"(构造器),这个子类构造器。

vue