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

niuxiaowei111 發(fā)布于2019-08-22 17:12 / 2657人閱讀

摘要：通過(guò)裝作這些變化，我們實(shí)現(xiàn)了從而到達(dá)了數(shù)據(jù)變化觸發(fā)函數(shù)的過(guò)程。于此同時(shí)，我們還實(shí)現(xiàn)了來(lái)擴(kuò)展這個(gè)可響應(yīng)的結(jié)構(gòu)，讓這個(gè)對(duì)象擁有了觸發(fā)和響應(yīng)事件的能力。最后，根據(jù)我們的實(shí)現(xiàn)，這是最終的產(chǎn)出，一個(gè)框架，了解一下系列文章地址優(yōu)化優(yōu)化總結(jié)

看這篇之前，如果沒(méi)有看過(guò)之前的文章，移步拉到文章末尾查看之前的文章。

provide / inject

在上一步我們實(shí)現(xiàn)了，父子組件，和 props 一樣 provide / inject 也是基于父子組件實(shí)現(xiàn)的，相比于 props 它的實(shí)現(xiàn)還要更簡(jiǎn)單一點(diǎn)。我們先來(lái)看看官網(wǎng)上對(duì) provide / inject 的描述。

這對(duì)選項(xiàng)需要一起使用，以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。

首先，由官網(wǎng)的例子可知，provide 的值是靜態(tài)的，并不會(huì)去綁定到 data 中的內(nèi)容。

so 靜態(tài)的，簡(jiǎn)單~，那實(shí)現(xiàn)一下。

export class Vue extends Event {
    ···
    _init(options) {
        ···
        // 用實(shí)例下的 _provide 屬性，保存?zhèn)魅氲?provide
        vm._provide = vm.$options.provide

        // 從父組件的 _provide 取對(duì)應(yīng)屬性，若沒(méi)有繼續(xù)往上找，直到找到根節(jié)點(diǎn)
        // 若找到根節(jié)點(diǎn)還沒(méi)有，就使用默認(rèn)值
        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)
        }
    }
}

測(cè)試代碼：

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 其實(shí)這對(duì)屬性的實(shí)現(xiàn)挺簡(jiǎn)單的，就是取值而已。

到此為止，Vue 中關(guān)于數(shù)據(jù)綁定的部分基本上實(shí)現(xiàn)的差不多了（不包括 directives/filters/slot/ref ···這些與頁(yè)面渲染的東西）

但也有以下東西沒(méi)實(shí)現(xiàn)內(nèi)容簡(jiǎn)單就不過(guò)多的介紹了

mixins: 就是 options 的合并

生命周期函數(shù): 在特定的時(shí)間觸發(fā)特定名稱的事件即可

$nextTick: 可以去看看 JS Event Loop 的相關(guān)內(nèi)容，優(yōu)先使用微任務(wù)來(lái)實(shí)現(xiàn)

接下來(lái)我們來(lái)想想，目前我們實(shí)現(xiàn)的東西都能干嘛？

總結(jié)

總的來(lái)說(shuō)，我們實(shí)現(xiàn)了一個(gè)可響應(yīng)的對(duì)象，我們可以拿到這個(gè)對(duì)象下數(shù)據(jù)的變化。

通過(guò)裝作這些變化，我們實(shí)現(xiàn)了 Computed、Watcher 從而到達(dá)了數(shù)據(jù)變化觸發(fā)函數(shù)的過(guò)程。

于此同時(shí)，我們還實(shí)現(xiàn)了 Event 來(lái)擴(kuò)展這個(gè)可響應(yīng)的結(jié)構(gòu)，讓這個(gè)對(duì)象擁有了觸發(fā)和響應(yīng)事件的能力。

最后我們實(shí)現(xiàn)了實(shí)例的樹(shù)結(jié)構(gòu)，在這個(gè)基礎(chǔ)上實(shí)現(xiàn)了 props 和 provide/inject 。

那么還是那個(gè)問(wèn)題，這個(gè)東西能干嘛用？

我想了想，前端的應(yīng)用很明顯，我們只要加一個(gè)視圖層的渲染函數(shù)，就能補(bǔ)充成一個(gè) MVVM 框架，Vue 也是在這個(gè)基礎(chǔ)上實(shí)現(xiàn)的。當(dāng)然你也可以實(shí)現(xiàn)自己虛擬節(jié)點(diǎn)，創(chuàng)造一個(gè)屬于你自己的 MVVM 框架。

或者小型的項(xiàng)目，并不需要虛擬節(jié)點(diǎn)，那么綁定一個(gè) HTML 渲染函數(shù)即可，所以我們實(shí)現(xiàn)的這個(gè)可響應(yīng)結(jié)構(gòu)對(duì)于 MVVM 來(lái)說(shuō)，僅僅少了一層 VIEW ，所以我想叫 MVM 也是沒(méi)問(wèn)題的。

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

對(duì)于這個(gè)可響應(yīng)結(jié)構(gòu)，我想了想用處：

項(xiàng)目自動(dòng)化配置，打包，初始化

根據(jù)配置篩選數(shù)據(jù)

···

對(duì)于第一點(diǎn)，假設(shè)我們有一個(gè)項(xiàng)目的配置（一個(gè) js 對(duì)象），然后我們把這個(gè)對(duì)象變成響應(yīng)結(jié)構(gòu)，那么當(dāng)這個(gè)對(duì)象發(fā)生變化的時(shí)候，比如說(shuō)版本號(hào)變動(dòng)，那么可以觸發(fā)更新代碼，打包編譯代碼，發(fā)送代碼到服務(wù)等一些列的步驟。

對(duì)于第二點(diǎn)，假設(shè)在后端，我們有一堆數(shù)據(jù)，我們的需求是根據(jù)需求去篩選數(shù)據(jù)，比如 pageNo/pageSize 等等，那么我們可以根據(jù)需求定下一個(gè) js 配置對(duì)象，然后針對(duì)每個(gè)屬性添加一系列定義好的 Watcher ，那么我們就可以根據(jù)這個(gè)對(duì)象的變動(dòng)執(zhí)行特定的方法，而我們所需要做的僅僅是把配置對(duì)象的屬性改一下就好，比如說(shuō)當(dāng)執(zhí)行 obj.pageNo = 2 ，然后程序就自動(dòng)的把對(duì)應(yīng)的數(shù)據(jù)給篩選出來(lái)了。

當(dāng)然，這個(gè)可響應(yīng)的結(jié)構(gòu)的用處遠(yuǎn)不至于此，只要以數(shù)據(jù)驅(qū)動(dòng)或是配置化的地方，都有用武之地。

ok finally 這個(gè)系列的文章算是結(jié)束了，至于 VUE 中關(guān)于，模板解析和虛擬 DOM 的實(shí)現(xiàn)，會(huì)有多帶帶的系列，但模板解析大部分是在正則解析，所以可能會(huì)沒(méi)有。

最后，根據(jù)我們的實(shí)現(xiàn)，這是最終的產(chǎn)出，一個(gè) MVM 框架，了解一下？

系列文章地址

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é)

GPU云服務(wù)器云服務(wù)器 Injecting inject injection MVVM

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94963.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

niuxiaowei111

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Go語(yǔ)言核心36講（Go語(yǔ)言實(shí)戰(zhàn)與應(yīng)用八）--學(xué)習(xí)筆記

閱讀 2192·2021-11-19 09:55
我用Python爬取了女神視界，爬蟲(chóng)之路永無(wú)止境「內(nèi)附源碼」

閱讀 2656·2021-11-11 16:55
Python表白代碼：太秀了，用過(guò)的人都找到了對(duì)象...【滿屏玫瑰盛開(kāi)！】

閱讀 3186·2021-09-28 09:36
虛擬主機(jī)能承受多少ip-虛擬主機(jī)有什么優(yōu)勢(shì)嗎？

閱讀 1953·2021-09-22 16:05
【譯】Vertical-Align: All You Need To Know

閱讀 3288·2019-08-30 15:53
上下高度固定（100px），中間自適應(yīng)

閱讀 1814·2019-08-30 15:44
css選擇器和jQuery選擇器

閱讀 2905·2019-08-29 13:10
? Emoji ? - 收藏集 - 掘金

閱讀 1350·2019-08-29 12:30

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

VUE - MVVM - part12 - props

VUE - MVVM - part10 - Computed

VUE - MVVM - part1 - defineProperty

VUE - MVVM - part7 - Event

VUE - MVVM - part2 - Dep

發(fā)表評(píng)論

0條評(píng)論

niuxiaowei111

男|高級(jí)講師

TA的文章

Go語(yǔ)言核心36講（Go語(yǔ)言實(shí)戰(zhàn)與應(yīng)用八）--學(xué)習(xí)筆記

我用Python爬取了女神視界，爬蟲(chóng)之路永無(wú)止境「內(nèi)附源碼」

Python表白代碼：太秀了，用過(guò)的人都找到了對(duì)象...【滿屏玫瑰盛開(kāi)！】

虛擬主機(jī)能承受多少ip-虛擬主機(jī)有什么優(yōu)勢(shì)嗎？

【譯】Vertical-Align: All You Need To Know

上下高度固定（100px），中間自適應(yīng)

css選擇器和jQuery選擇器

? Emoji ? - 收藏集 - 掘金

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！