VUE-MVVM-part 13-inject&まとめ

この文章を読む前に、前の文章を見たことがなければ、文章の最後に引っ張って前の文章を見ます.
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を実現する例示的なツリー構造を実現した.
では、やはりその問題ですが、これは何に使えますか.
フロントエンドの応用は明らかで、ビューレイヤのレンダリング関数を1つ追加すれば、MVVMフレームワークに補完でき、Vueもこれに基づいて実現されると思います.もちろん、自分の仮想ノードを実現し、自分のMVVMフレームワークを作成することもできます.
あるいは小型のプロジェクトでは、仮想ノードは必要ありません.では、HTMLレンダリング関数をバインドすればいいので、MVVMにとって、VIEWの層が1つ足りないだけなので、MVMと呼んでも大丈夫だと思います.
しかし、これは純Jsなので、発揮できる能力も先端だけではないと思います.私がこれを完全にテンプレートから離れて分析したのも、これを単独で道具にしたいからです.
この応答性構造について、私は考えてみました.

プロジェクト自動化構成、パッケージング、初期化

構成によるフィルタデータ

···

第1の点では、プロジェクトの構成(jsオブジェクト)があり、このオブジェクトを応答構造にすると、このオブジェクトが変化したとき、例えばバージョン番号が変動すると、更新コード、パッケージ化コード、サービスなどのいくつかの列にコードを送信するステップをトリガーすることができます.
第2の点では、バックエンドにデータが山積みになっていると仮定し、需要に応じてデータをフィルタリングします.例えば、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-part 4-最適化Watcher

VUE - MVVM - part5 - Observe

VUE - MVVM - part6 - Array

VUE - MVVM - part7 - Event

VUE-MVVM-part 8-最適化Event

VUE - MVVM - part9 - Vue

VUE - MVVM - part10 - Computed

VUE - MVVM - part11 - Extend

VUE - MVVM - part12 - props

VUE-MVVM-part 13-inject&総括