摘要：所以方法，是對默認(rèn)進(jìn)行擴(kuò)展，從而實(shí)現(xiàn)擴(kuò)展。這里我用了這個(gè)庫提供的合并方法，用來合并兩個(gè)對象，并不會(huì)修改原對象的內(nèi)容。測試符合我們的預(yù)期，方法也就實(shí)現(xiàn)了，下一步，實(shí)現(xiàn)父子組件。系列文章地址優(yōu)化優(yōu)化總結(jié)

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

在 Vue 中有 extend 方法可以擴(kuò)展 Vue 的實(shí)例，在上一步中，有一些實(shí)現(xiàn)是必須要通過子父組件才能實(shí)現(xiàn)，而子組件相當(dāng)于一個(gè)特殊的 Vue 實(shí)例，所以這步，我們先把這個(gè)擴(kuò)展實(shí)例的方法實(shí)現(xiàn)。

我們先來看看官網(wǎng)對于 extend 方法的介紹：

使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個(gè)“子類”。參數(shù)是一個(gè)包含組件選項(xiàng)的對象。

從后面一句和具體的使用方法可以得出其實(shí)是我們創(chuàng)建實(shí)例時(shí)，對于傳入?yún)?shù)的擴(kuò)展。對于這個(gè)參入?yún)?shù)我們就叫它 options。

我們接著往下想，既然這個(gè) options 是能擴(kuò)展的，那么原 Vue 類下，肯定保存著一個(gè)默認(rèn) options ，而創(chuàng)建 Vue 實(shí)例時(shí)，會(huì)把傳入的 options 和默認(rèn)的 options 進(jìn)行合并。

所以 extend 方法，是對默認(rèn) options 進(jìn)行擴(kuò)展，從而實(shí)現(xiàn)擴(kuò)展。

ok 有了思路，我們來實(shí)現(xiàn)它：

首先是默認(rèn)的 options ，同時(shí)我們假設(shè)一個(gè)方法（mergeOptions）用來合并 options

let uid = 0

export class Vue extends Event {
    ···

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

接著我們來實(shí)現(xiàn) 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 同名合并成一個(gè)數(shù)組
    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 的特殊性，我們不覆蓋同名屬性，而是都保存在一個(gè)數(shù)組中
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
}

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

這里我用了 ramda 這個(gè)庫提供的合并方法，用來合并兩個(gè)對象，并不會(huì)修改原對象的內(nèi)容。

ok 合并 options 的方法寫好了，我們接著來實(shí)現(xiàn) extend 同過上面的分析，extend 函數(shù)僅僅是對默認(rèn) options 的擴(kuò)展

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 即可，同時(shí)將 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 符合我們的預(yù)期，extend 方法也就實(shí)現(xiàn)了，下一步，實(shí)現(xiàn)父子組件。

VUE - MVVM - part1 - defineProperty

VUE - MVVM - part2 - Dep

VUE - MVVM - part3 - Watcher

VUE - MVVM - part4 - 優(yōu)化Watcher

VUE - MVVM - part5 - Observe

VUE - MVVM - part6 - Array

VUE - MVVM - part7 - Event

VUE - MVVM - part8 - 優(yōu)化Event

VUE - MVVM - part9 - Vue

VUE - MVVM - part10 - Computed

VUE - MVVM - part11 - Extend

VUE - MVVM - part12 - props

VUE - MVVM - part13 - inject & 總結(jié)