Vue源码学习(十八):实现组件注册(一)Vue.component()和Vue.extend()

好家伙,

0.完整代码已开源

https://github.com/Fattiger4399/analytic-vue.git

1.思路

1.1.什么是组件化?

Vue 组件化是指将复杂的应用程序拆分成多个独立的、可复用的组件，这些组件可以实现特定的功能或局部功能。
组件化有助于提高开发效率、方便重复使用、简化调试步骤、提升项目可维护性，并便于多人协同开发。

以下是 Vue 组件化的好处：

代码复用,模块化,提高可维护性,便于 debug,适应性,提升性能(局部更新),有利于团队协

总之，Vue 组件化有助于提高开发效率、降低维护成本、提高应用程序性能，并便于团队协作。它是 Vue 框架的核心概念，也是 Vue 应用开发的关键优势之一。

1.2.在项目中组件化的使用

vue中使用组件的方式无非两种,全局组件与局部组件

let vm = new Vue({
            el: "#app",
            data: {
                firstName: 'pang',
                lastName: 'hu'
            },
            component: {
                'my-button': {
                    template: `<button>局部按钮</button>`
                }
            }
        })
        Vue.component('my-button', {
            template: `<button>全局按钮</button>`
        })

本篇涉及Vue.component()和Vue.extend()

1. Vue.component：
   - 用于创建可复用的、独立的、一次性（单例）的组件。
   - 创建的组件实例之间互不干扰，各自拥有独立的实例状态。
   - 无法继承父组件的属性和方法。

2. Vue.extend()：
   - 用于创建可复用的、独立的、多次使用的（原型链继承）组件。
   - 创建的组件实例之间可以通过原型链继承父组件的属性和方法。
   - 相当于创建了一个新的组件类，可以理解为对父组件的扩展。

来vue的官网看一看

 

2.代码实现

global-api/index.js

Vue.component = function (id, componentDef) {
    componentDef.name = componentDef.name || id
    console.log(componentDef)

    console.log(this)
    componentDef = this.extend(componentDef) //返回一个实例
    console.log(componentDef)

    this.options.components[id] = componentDef
    console.log(this.options)
  }

Vue.extend = function (options) {
    let spuer = this
    const Sub = function vuecomponet(opts) { //opts 子组件的实例
      //
      //初始化
      this._init(opts)
    }
    //属性如何处理??
    //子组件继承父组件中的属性Vue 类的继承
    Sub.prototype = Object.create(spuer.prototype)
    //问题 子组件中this的执行
    Sub.prototype.constructor = Sub
    //重点,将父组件的属性与子组件的属性合并到一起
    Sub.options = mergeOptions(this.options, options)
    console.log(Sub.options)
    return Sub
  }

问题一:

此处为什么要执行

Sub.prototype.constructor = Sub

答:

在 JavaScript 中，每个对象都有一个内部属性 constructor，该属性指向创建该对象的构造函数。

通常情况下，每个对象的 constructor 属性都指向它自身对应的构造函数。

在 Vue 中，通过 Vue.extend 方法创建的子组件构造函数，它们的原型对象（Sub.prototype）默认情况下并没有正确的 constructor 属性，即 constructor 指向的是 Vue 而不是子组件自身。

这样的话，在使用 new 运算符来创建子组件实例时，实际上会调用父组件的构造函数，导致创建子组件实例失败。

因此，在这段代码中，使用 Sub.prototype.constructor = Sub 将子组件的 constructor 属性设置为子组件自身，用于正确地设置子组件的构造函数。

这样，在使用 new 运算符来创建子组件实例时，就可以正确地使用子组件的构造函数来创建实例了。

3.实现效果