Vue原始碼學習(十八):實現元件註冊(一)Vue.component()和Vue.extend()

2023-12-09 21:01:21

好傢伙,

 

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.實現效果