看這篇之前，假如沒有看過之前的文章，移步拉到文章末端檢察之前的文章。

provide / inject

在上一步我們完成了，父子組件，和 props 一樣 provide / inject 也是基於父子組件完成的，比擬於 props 它的完成還要更簡樸一點。我們先來看看官網上對 provide / inject 的形貌。

這對選項須要一同運用，以許可一個先人組件向其所有子孫後代注入一個依靠，不管組件條理有多深，並在起上下游關聯建立的時刻里一直見效。

起首，由官網的例子可知，provide 的值是靜態的，並不會去綁定到 data 中的內容。

so 靜態的，簡樸~，那完成一下。

export class Vue extends Event {
    ···
    _init(options) {
        ···
        // 用實例下的 _provide 屬性，保留傳入的 provide
        vm._provide = vm.$options.provide

        // 從父組件的 _provide 取對應屬性，若沒有繼承往上找，直到找到根節點
        // 若找到根節點還沒有，就運用默認值
        let inject = vm._inject = {}
        for (let key in  vm.$options.inject) {
            inject[key] = getProvideForInject(vm, key, vm.$options.inject[key].default)
        }
        // 代理到 this 下
        for (let key in inject) {
            proxy(vm, '_inject', key)
        }
    }
}

測試代碼：

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

let test = new Vue({
    provide: {
        foo: 'bar'
    },
    components: {
        sub: {
            inject: {
                foo: {default: 'foo'},
                bar: {default: 'subBar'}
            },
            components: {
                subSub: {
                    inject: {
                        foo: {default: 'foo'},
                        bar: {default: 'subSubBar'}
                    }
                }
            }
        }
    }
})

let testSubClass = Vue.extend(test.$options.components.sub)
let testSub = new testSubClass({parent: test})

let testSubSubClass = Vue.extend(testSub.$options.components.subSub)
let testSubSub = new testSubSubClass({parent: testSub})

console.log(testSub.foo)
// bar
console.log(testSub.bar)
// subBar
console.log(testSubSub.foo)
// bar
console.log(testSubSub.bar)
// subSubBar

檢察完整的代碼

ok 實在這對屬性的完成挺簡樸的，就是取值罷了。

到此為止，Vue 中關於數據綁定的部份基本上完成的差不多了（不包括 directives/filters/slot/ref ···這些與頁面襯着的東西）

但也有以下東西沒完成內容簡樸就不過量的引見了

1. mixins: 就是 options 的兼并
2. 性命周期函數: 在特定的時刻觸發特定稱號的事宜即可
3. $nextTick: 能夠去看看 JS Event Loop 的相關內容，優先運用微使命來完成

接下來我們來想一想，現在我們完成的東西都能幹嗎？

總結

總的來講，我們完成了一個可相應的對象，我們能夠拿到這個對象下數據的變化。

經由歷程假裝這些變化，我們完成了 Computed、Watcher 從而抵達了數據變化觸發函數的歷程。

於此同時，我們還完成了 Event 來擴大這個可相應的構造，讓這個對象具有了觸發和相應事宜的才能。

末了我們完成了實例的樹構造，在這個基礎上完成了 props 和 provide/inject 。

那末照樣那個問題，這個東西能幹嗎用？

我想了想，前端的運用很明顯，我們只需加一個視圖層的襯着函數，就可以補充成一個 MVVM 框架，Vue 也是在這個基礎上完成的。固然你也能夠完成本身假造節點，製造一個屬於你本身的 MVVM 框架。

或許小型的項目，並不須要假造節點，那末綁定一個 HTML 襯着函數即可，所以我們完成的這個可相應構造關於 MVVM 來講，僅僅少了一層 VIEW ，所以我想叫 MVM 也是沒問題的。

然則我想這個東西是純 Js 的，所以能發揮的才能也一定不僅僅是在前端，我之所以將這個完整的離開模板來剖析，也是想把這塊零丁出來成為一個東西。

關於這個可相應構造，我想了想用途：

1. 項目自動化設置，打包，初始化
2. 依據設置挑選數據
3. ···

關於第一點，假定我們有一個項目的設置（一個 js 對象），然後我們把這個對象變成相應構造，那末當這個對象發生變化的時刻，比方說版本號更改，那末能夠觸發更新代碼，打包編譯代碼，發送代碼到效勞等一些列的步驟。

關於第二點，假定在後端，我們有一堆數據，我們的需求是依據需求去挑選數據，比方 pageNo/pageSize 等等，那末我們能夠依據需求定下一個 js 設置對象，然後針對每一個屬性增加一系列定義好的 Watcher ，那末我們就可以夠依據這個對象的更改實行特定的要領，而我們所須要做的僅僅是把設置對象的屬性改一下就好，比方說當實行 obj.pageNo = 2 ，然後順序就自動的把對應的數據給挑選出來了。

固然，這個可相應的構造的用途遠不至於此，只需以數據驅動或是設置化的處所，都有用武之地。

ok finally 這個系列的文章算是完畢了，至於 VUE 中關於，模板剖析和假造 DOM 的完成，會有零丁的系列，但模板剖析大部份是在正則剖析，所以可能會沒有。

末了，依據我們的完成，這是終究的產出，一個 MVM 框架，相識一下？

系列文章地點

1. VUE – MVVM – part1 – defineProperty
2. VUE – MVVM – part2 – Dep
3. VUE – MVVM – part3 – Watcher
4. VUE – MVVM – part4 – 優化Watcher
5. VUE – MVVM – part5 – Observe
6. VUE – MVVM – part6 – Array
7. VUE – MVVM – part7 – Event
8. VUE – MVVM – part8 – 優化Event
9. VUE – MVVM – part9 – Vue
10. VUE – MVVM – part10 – Computed
11. VUE – MVVM – part11 – Extend
12. VUE – MVVM – part12 – props
13. VUE – MVVM – part13 – inject & 總結