VUE - MVVM - part13 - inject & 總結

niuxiaowei111 發布于2019-08-22 17:12 / 2658人閱讀

摘要：通過裝作這些變化，我們實現了從而到達了數據變化觸發函數的過程。于此同時，我們還實現了來擴展這個可響應的結構，讓這個對象擁有了觸發和響應事件的能力。最后，根據我們的實現，這是最終的產出，一個框架，了解一下系列文章地址優化優化總結

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

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 ···這些與頁面渲染的東西）

但也有以下東西沒實現內容簡單就不過多的介紹了

mixins: 就是 options 的合并

生命周期函數: 在特定的時間觸發特定名稱的事件即可

$nextTick: 可以去看看 JS Event Loop 的相關內容，優先使用微任務來實現

接下來我們來想想，目前我們實現的東西都能干嘛？

總結

總的來說，我們實現了一個可響應的對象，我們可以拿到這個對象下數據的變化。

通過裝作這些變化，我們實現了 Computed、Watcher 從而到達了數據變化觸發函數的過程。

于此同時，我們還實現了 Event 來擴展這個可響應的結構，讓這個對象擁有了觸發和響應事件的能力。

最后我們實現了實例的樹結構，在這個基礎上實現了 props 和 provide/inject 。

那么還是那個問題，這個東西能干嘛用？

我想了想，前端的應用很明顯，我們只要加一個視圖層的渲染函數，就能補充成一個 MVVM 框架，Vue 也是在這個基礎上實現的。當然你也可以實現自己虛擬節點，創造一個屬于你自己的 MVVM 框架。

或者小型的項目，并不需要虛擬節點，那么綁定一個 HTML 渲染函數即可，所以我們實現的這個可響應結構對于 MVVM 來說，僅僅少了一層 VIEW ，所以我想叫 MVM 也是沒問題的。

但是我想這個東西是純 Js 的，所以能發揮的能力也肯定不僅僅是在前端，我之所以將這個完全的脫離模板來分析，也是想把這塊多帶帶出來成為一個工具。

對于這個可響應結構，我想了想用處：

項目自動化配置，打包，初始化

根據配置篩選數據

···

對于第一點，假設我們有一個項目的配置（一個 js 對象），然后我們把這個對象變成響應結構，那么當這個對象發生變化的時候，比如說版本號變動，那么可以觸發更新代碼，打包編譯代碼，發送代碼到服務等一些列的步驟。

對于第二點，假設在后端，我們有一堆數據，我們的需求是根據需求去篩選數據，比如 pageNo/pageSize 等等，那么我們可以根據需求定下一個 js 配置對象，然后針對每個屬性添加一系列定義好的 Watcher ，那么我們就可以根據這個對象的變動執行特定的方法，而我們所需要做的僅僅是把配置對象的屬性改一下就好，比如說當執行 obj.pageNo = 2 ，然后程序就自動的把對應的數據給篩選出來了。

當然，這個可響應的結構的用處遠不至于此，只要以數據驅動或是配置化的地方，都有用武之地。

ok finally 這個系列的文章算是結束了，至于 VUE 中關于，模板解析和虛擬 DOM 的實現，會有多帶帶的系列，但模板解析大部分是在正則解析，所以可能會沒有。

最后，根據我們的實現，這是最終的產出，一個 MVM 框架，了解一下？

系列文章地址

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 & 總結

云服務器 GPU云服務器 Injecting inject injection MVVM

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/94963.html

VUE - MVVM - part12 - props

摘要：看這篇之前，如果沒有看過之前的文章，移步拉到文章末尾查看之前的文章。而該組件實例的父實例卻并不固定，所以我們將這些在使用時才能確定的參數在組件實例化的時候傳入。系列文章地址優化優化總結看這篇之前，如果沒有看過之前的文章，移步拉到文章末尾查看之前的文章。前言在上一步，我們實現 extend 方法，用于擴展 Vue 類，而我們知道子組件需要通過 extend 方法來實現，我們從測試例...

bluesky 2019-08-22 17:07 評論0 收藏0
VUE - MVVM - part10 - Computed

摘要：了解之后我們來實現它，同樣的為了方便理解我寫成了一個類這里的一般是的實例將屬性代理到實例下的構造函數我們實現了代理屬性和更新計算屬性的值，同時依賴沒變化時，也是不會觸發的更新，解決了以上的個問題。看這篇之前，如果沒有看過之前的文章，移步拉到文章末尾查看之前的文章。回顧先捋一下，之前我們實現的 Vue 類，主要有一下的功能：屬性和方法的代理 proxy 監聽屬性 watche...

callmewhy 2019-08-26 11:53 評論0 收藏0
VUE - MVVM - part1 - defineProperty

摘要：在中關于如何實現在網上可以搜出不少，在看了部分源碼后，梳理一下內容。換個說法，當我們取值的時候，函數自動幫我們添加了針對當前值的依賴，當這個值發生變化的時候，處理了這些依賴，比如說節點的變化。在 VUE 中關于如何實現在網上可以搜出不少，在看了部分源碼后，梳理一下內容。首先，我們需要了解一下 js 中的一個 API :Object.defineProperty(obj, prop,...

liukai90 2019-08-22 16:12 評論0 收藏0
VUE - MVVM - part7 - Event

摘要：事件是什么在標準瀏覽器中，我們經常使用來為一個添加一個事件等。仔細看這些情況，歸結到代碼中，無非就是一個行為或情況的名稱，和一些列的動作，而在中動作就是，一系列的動作就是一個函數的集合。看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章。事件是什么？在標準瀏覽器中，我們經常使用：addEventListener 來為一個 DOM 添加一個事件（click、mouse...

xialong 2019-08-22 16:39 評論0 收藏0
VUE - MVVM - part2 - Dep

摘要：看這篇之前，如果沒看過先移步看實現中。同樣的，在取值時收集依賴，在設置值當值發生變化時觸發依賴。中實現了一個的類來處理以上兩個問題，之后再說。以下語法下的，源碼中差不多就這樣點擊查看相關代碼系列文章地址優化優化總結看這篇之前，如果沒看過 step1 先移步看實現 VUE 中 MVVM - step1 - defineProperty。在上一篇我們大概實現了，Vue 中的依賴收集和...

hover_lew 2019-08-22 16:12 評論0 收藏0