摘要：所以方法，是對默認進行擴展，從而實現擴展。這里我用了這個庫提供的合并方法，用來合并兩個對象，并不會修改原對象的內容。測試符合我們的預期，方法也就實現了，下一步，實現父子組件。系列文章地址優化優化總結

看這篇之前，如果沒有看過之前的文章，移步拉到文章末尾查看之前的文章。

在 Vue 中有 extend 方法可以擴展 Vue 的實例，在上一步中，有一些實現是必須要通過子父組件才能實現，而子組件相當于一個特殊的 Vue 實例，所以這步，我們先把這個擴展實例的方法實現。

我們先來看看官網對于 extend 方法的介紹：

使用基礎 Vue 構造器，創建一個“子類”。參數是一個包含組件選項的對象。

從后面一句和具體的使用方法可以得出其實是我們創建實例時，對于傳入參數的擴展。對于這個參入參數我們就叫它 options。

我們接著往下想，既然這個 options 是能擴展的，那么原 Vue 類下，肯定保存著一個默認 options ，而創建 Vue 實例時，會把傳入的 options 和默認的 options 進行合并。

所以 extend 方法，是對默認 options 進行擴展，從而實現擴展。

ok 有了思路，我們來實現它：

首先是默認的 options ，同時我們假設一個方法（mergeOptions）用來合并 options

let uid = 0

export class Vue extends Event {
    ···

    _init(options) {
        let vm = this
        // 為了方便引用合并的 options 我們把它掛載在 Vue 實例下
        vm.$options = mergeOptions(
            this.constructor.options,
            options,
            vm
        )
        ···
    }
}
// 默認的 options
Vue.options = {
    // 組件列表
    components: {},
    // 基類
    _base: Vue
}

接著我們來實現 mergeOptions ：

import R from "ramda"

export function mergeOptions(parent, child) {
    // data/methods/watch/computed
    let options = {}

    // 合并 data 同名覆蓋
    options.data = mergeData(parent.data, child.data)

    // 合并 methods 同名覆蓋
    options.methods = R.merge(parent.methods, child.methods)

    // 合并 watcher 同名合并成一個數組
    options.watch = mergeWatch(parent.watch, child.watch)

    // 合并 computed 同名覆蓋
    options.computed = R.merge(parent.computed, child.computed)

    return options
}

function mergeData(parentValue, childValue) {
    if (!parentValue) {
        return childValue
    }
    if (!childValue) {
        return parentValue
    }
    return function mergeFnc() {
        return R.merge(parentValue.call(this), childValue.call(this))
    }
}

// 由于 watcher 的特殊性，我們不覆蓋同名屬性，而是都保存在一個數組中
function mergeWatch(parentVal, childVal) {
    if (!childVal) return R.clone(parentVal || {})
    let ret = R.merge({}, parentVal)
    for (let key in childVal) {
        let parent = ret[key]
        let child = childVal[key]
        if (parent && !Array.isArray(parent)) {
            parent = [parent]
        }
        ret[key] = parent
            ? parent.concat(child)
            : Array.isArray(child) ? child : [child]
    }
    return ret
}

目前我們僅僅實現了 data/methods/watch/computed 這 4 個 options 中的內容，所以我們先合并這 4 項，由于 data/methods/computed 這 3 項是具有唯一性（比如 this.a 應該是一個確定的值），所以采用同名屬性覆蓋的方式，而 watch 是當發生變化時候執行方法，所以所有注冊過的方法都應該執行，因而采用同名屬性的內容合并成一個數組。

這里我用了 ramda 這個庫提供的合并方法，用來合并兩個對象，并不會修改原對象的內容。

ok 合并 options 的方法寫好了，我們接著來實現 extend 同過上面的分析，extend 函數僅僅是對默認 options 的擴展

Vue.extend = function (extendOptions) {
    const Super = this

    class Sub extends Super {
        constructor(options) {
            super(options)
        }
    }

    Sub.options = mergeOptions(
        Super.options,
        extendOptions
    )

    Sub.super = Super
    Sub.extend = Super.extend

    return Sub
}

同樣的我們使用 mergeOptions 來合并一下 options 即可，同時將 super 指向父類、獲取 extend 方法。

import {Vue} from "./Vue.mjs"

let subVue = Vue.extend({
    data() {
        return {
            dataTest: 1
        }
    },
    methods: {
        methodTest() {
            console.log("methodTest")
        }
    },
    watch: {
        "dataTest"(newValue, oldValue) {
            console.log("watchTest newValue = " + newValue)
        }
    },
    computed: {
        "computedTest": {
            get() {
                return this.dataTest + 1
            }
        }
    }
})

let test = new subVue({
    data() {
        return {
            subData: 11
        }
    },
    methods: {
        subMethod() {
            console.log("subMethodTest")
        }
    },
    watch: {
        "subData"(newValue, oldValue) {
            console.log("subWatch newValue = " + newValue)
        }
    },
    computed: {
        "subComputed": {
            get() {
                return this.subData + 1
            }
        }
    }
})

console.log(test.dataTest)
// 1
console.log(test.subData)
// 11

console.log(test.computedTest)
// 2
console.log(test.subComputed)
// 12

test.methodTest()
// methodTest
test.subMethod()
// subMethodTest

test.dataTest = 2
// watchTest newValue = 2
test.subData = 12
// subWatch newValue = 12

console.log(test.constructor === subVue)
// true
console.log(subVue.super === Vue)
// true

ok 符合我們的預期，extend 方法也就實現了，下一步，實現父子組件。

VUE - MVVM - part1 - defineProperty

VUE - MVVM - part2 - Dep

VUE - MVVM - part3 - Watcher

VUE - MVVM - part4 - 優化Watcher

VUE - MVVM - part5 - Observe

VUE - MVVM - part6 - Array

VUE - MVVM - part7 - Event

VUE - MVVM - part8 - 優化Event

VUE - MVVM - part9 - Vue

VUE - MVVM - part10 - Computed

VUE - MVVM - part11 - Extend

VUE - MVVM - part12 - props

VUE - MVVM - part13 - inject & 總結