Vue2.x の応答性の簡単な説明と例

クラス Vue{
    コンストラクタ(オプション){
        // 1. 渡された属性を属性を通じて保存します。this.$options= options||{};
        this.$data = オプション.data||{};
        this.$el = typeof options.el ==='string' ? document.querySelector(options.el) : options.el;
        // 2. データパラメータのデータをゲッターとセッターに変換し、Vue インスタンスにマウントします。this._proxyData(this.$data)
        // 3. データの変更を監視するために observe オブジェクトを呼び出します new Observer(this.$data)
        // 4. コンパイラオブジェクトを呼び出してページをレンダリングする new Compiler(this)
    }
    _proxyData(データ){
        if (data&&Object.keys(data).length>0){
             for (const キー in データ) {
                Object.defineProperty(this,key,{
                    設定可能:true、
                    列挙可能:true、
                    得る（）{
                        データを返す[キー]
                    },
                    設定(値){
                        if (データ[キー]===値) {
                            戻る;
                        }
                        データ[キー]=値;
                    }
                })
             }
        }
    }
}

//データハイジャッククラスObserver {
    コンストラクタ(データ) {
        this.walk(データ)
    }
    ウォーク(データ) { 
        //1. データがオブジェクトかどうかを判定する if (!data || typeof data !== 'object') {     
            戻る
        }
        //2. ループ呼び出しdefineReactiveでdataObject.keys(data).forEach(key => {をハイジャックする
            this.defineReactive(データ、キー、データ[キー])
        })
    }
    定義Reactive(オブジェクト、キー、値) {
        //通知機能を作成する const dep = new Dep()
        //参照オブジェクトのプロパティをレスポンシブにするには、walk を使用します。this.walk(val)
        const は、次のようになります。
        Object.defineProperty(obj, キー, {
            設定可能: true、
            列挙可能: true、
            得る（） {
                //Notifier はオブザーバーを収集します Dep.target && dep.addSub(Dep.target)
                戻り値:
            },
            set(newVal) {
                (newVal === val)の場合{
                    戻る;
                }
                val = 新しいVal;
                that.walk(新しい値)
                // 監視対象オブジェクトが変更されると、通知オブジェクトは各オブザーバーに通知を送信します dep.notify()
            }
        })
    }
}

//コンパイラクラス Compiler {
    コンストラクタ(vm) {
        this.el = vm.$el;
        this.vm = vm;
        this.compile(this.el)
    }
    //テンプレートをコンパイルして、ノードがテキストノードか要素ノードかを判断する compile(el) {
        childNodes を el.childNodes とします。
        //子ノードの最初の層を処理する Array.from(childNodes).forEach(node ​​=> {
            if (this.isTextNode(ノード)) {
                this.compileText(ノード)
            } それ以外の場合は (this.isElementNode(node)) {
                this.compileElement(ノード)
            }
            //現在のノードに子ノードがある場合は、コンパイル命令を再帰的に呼び出します。if (node.childNodes && node.childNodes.length) {
                this.compile(ノード)
            }
        })
    }

    //要素ノードをコンパイルし、命令を処理する compileElement(node) {  
        //すべての命令を走査する Array.from(node.attributes).forEach(attr => {
            //ディレクティブノードかどうかを判断します if (this.isDirective(attr.name)) {
                定数 nodeName = attr.name;
                定数キー = attr.nodeValue;
                const ディレクティブ = nodeName.substr(2)
                this.updater(ディレクティブ、ノード、キー)
            }
        }) 
    }
    アップデータ(ディレクティブ、ノード、キー){
        const updaterFn = this[ディレクティブ+"Updater"]
        updaterFn && updaterFn.call(this,node,this.vm[key],key)
    }
    //vテキスト
    textUpdater(ノード、値、キー){
        node.textContent=値
        //v-text式が使用される場所はオブザーバーです new Watcher(this.vm,key,newValue => {
            node.textContent = 新しい値
        })
    }
    //vモデル
    modelUpdater(ノード、値、キー){
        ノード.値 =値
        //v-model式が使用される場所はオブザーバーです new Watcher(this.vm,key,newValue => {
            node.value = 新しい値
        })
      //双方向バインディングを実現するnode.addEventListener('input',()=>{
            this.vm[キー] = ノード.値
        })
    }
    //v-html
    htmlUpdater(ノード、値、キー){
        node.innerHTML = 値
        //v-html式が使用される場所はオブザーバーです new Watcher(this.vm,key,newValue => {
            node.innerHTML = 新しい値
        })
    }

    //差分式の処理 compileText(node) {
        //正規表現の一致の違い let reg = /\{\{(.+?)\}\}/
        //正規表現を使用してノードのテキストコンテンツと一致させ、一致する場合は置き換えます if (reg.test(node.textContent)) {
            //補間式のキーを取得する
            キーを RegExp.$1 とします。
            値を node.textContent とします。
            node.textContent = value.replace(reg, this.vm[key])

            //差分式が使用される場所はオブザーバーです new Watcher(this.vm,key,newValue => {
                node.textContent = 新しい値
            })
        }
    }

    //ディレクティブかどうか isDirective(attrName) {
        attrName.startsWith('v-') を返します。
    }

    //テキストノードかどうか isTextNode(node) {
        node.nodeType === 3 を返します
    }

    //要素かどうか isElementNode(node) {
        node.nodeType === 1 を返します
    }
}

//通知クラスclass Dep {
    コンストラクタ() {
        //ストレージオブザーバー this.subs = []
    }

    /**
     * オブザーバーを集める */
    サブルーチンを追加します。
        if (sub && sub.update) {
            this.subs.push(サブ)
        }
    }

    /**
     * 状態の変化をオブザーバーに通知する */
    通知() {
        this.subs.forEach(sub => {
            サブ.更新()
        })
    }
}

//オブザーバークラスクラス Watcher {
    コンストラクタ (vm,key,cb) {
        //Vue インスタンス this.vm =vm;
        //データ内のキーオブジェクト this.key =key;
        // ビューを更新するためのコールバック関数 this.cb = cb
        //現在のオブザーバーインスタンスをDepのターゲット静的プロパティに保存します。Dep.target = this
        //Observe の getter メソッドをトリガーし、現在のインスタンスを Dep.subs に保存します //データ内のキーに対応する古い値 this.oldValue = this.vm[this.key]
        依存関係ターゲット = null
    }
    //各オブザーバーには状態を変更するための更新メソッドがあります update(){
        const newValue = this.vm[this.key]
        if ( this.newValue === this.oldValue ) {
            戻る
        }
        this.cb(新しい値)
    }
}

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>インデックス</title>
    <script src="./js/dep.js"></script>
    <script src="./js/watcher.js"></script>
    <script src="./js/compiler.js"></script>
    <script src="./js/observer.js"></script>
    <script src="./js/vue.js"></script>
</head>
<本文>
    <p id="アプリ">
        <h1>差分式</h1>
        <h3>{{メッセージ}}</h3>
        <h3>{{カウント}}</h3>
        <h1>v-テキスト</h1>
        <p v-text='メッセージ'></p>
        <h1>vモデル</h1>
        <input type="text" v-model="msg" attr="msg">
        <input type="text" v-model="count">
        <h1>v-html</h1>
        <p v-html="htmlテキスト"></p>
    </p>
    <スクリプト>
        vm = new Vue({
            el:"#アプリ",
            データ：{
                メッセージ: '情報',
                count:'数量', 
		人:{name:'张三'},
                htmlText:"<p style='color:red'>こんにちは</p>"
            }
        })
    </スクリプト>
</本文>