Vueの使用に関する深い理解

var vm = 新しい Vue({
    データ： {
        テスト ： {
            1: 1
        }
    },
    作成: 関数 () {
        コンソールにログ出力します。
    }
});

var ブック = {
  名前: 「人間の弱さ」
};
console.log(Book.name); // 人間の弱点

//console.log(book.name) と同時に、book に書籍番号を直接追加します。var Book = {};
var name = '';
Object.defineProperty(Book,'name',{
    設定:関数(値) {
        名前 = 値;
        console.log('書籍名を選択しました:' + 値);
    },
    取得:関数() {
        console.log('getメソッドが監視されています');
        '<'+name+'>' を返します。
    }
});
Book.name = 'Weakness of Human Nature'; //本に名前を付けました: Weakness of Human Natureconsole.log(Book.name); //<Weakness of Human Nature>

console.log(本)

//すべての属性について、すべての属性を再帰的に走査します。function defineReactive(data,key,val) {
    observe(val); //すべてのプロパティを再帰的に走査する Object.defineProperty(data,key,{
        enumerable:true, // プロパティ記述子は、プロパティの構成可能値が true の場合にのみ変更でき、対応するオブジェクトからプロパティを削除することもできます。
        configurable:true, //このプロパティは、このプロパティの列挙型が true の場合にのみ、オブジェクトの列挙プロパティに表示できます。get:function() {
            戻り値:
        },
        設定:関数(newVal) {
            val = 新しいVal;
            console.log('プロパティ '+key+' が監視されており、現在の値は "'+newVal.toString()+'" です');
        }
    })
}

関数 observe(データ) {
    if(!data || typeof data !== 'object') {
        戻る;
    }
    Object.keys(データ).forEach(関数(キー){
        Reactive を定義します (データ、キー、データ[キー])。
    });
}

var ライブラリ = {
    本1: {
        名前： ''
    },
    本2: ''
};
観察(ライブラリ);
library.book1.name = 'vue authoritative guide'; // プロパティ名は監視されており、現在の値は「vue authoritative guide」です
library.book2 = 'そのような本はありません'; // 属性 book2 は監視されており、現在の値は「そのような本はありません」です

関数defineReactive(データ,キー,値) {
    観察(val);
    var dep = 新しい Dep();
    Object.defineProperty(データ、キー、{
        列挙可能: true、
        設定可能: true、
        取得: 関数() {
            if (サブスクライバーを追加する必要がありますか) { //ウォッチャー初期化トリガー dep.addSub(watcher); // ここでサブスクライバーを追加します}
            戻り値:
        },
        設定: 関数(newVal) {
            場合 (val === newVal) {
                戻る;
            }
            val = 新しいVal;
            console.log('property' + key + ' が監視されており、現在の値は次のとおりです: "' + newVal.toString() + '"');
            dep.notify(); // データが変更された場合は、すべてのサブスクライバーに通知します}
    });
}

関数 observe(データ) {
    if(!data || typeof data !== 'object') {
        戻る;
    }
    Object.keys(データ).forEach(関数(キー){
        Reactive を定義します (データ、キー、データ[キー])。
    });
}

関数Dep() {
    this.subs = [];
}

//プロトタイプ プロパティを使用すると、オブジェクトにプロパティとメソッドを追加できます。 //プロトタイプ プロパティは関数オブジェクト、特にコンストラクターでのみ使用できます。関数オブジェクトを宣言している限り、プロトタイプは存在します。 //オブジェクト インスタンスにはこのプロパティはありません。 Dep.prototype = {                        
    サブ関数を追加します。
        this.subs.push(sub);
    },
    通知:関数() {
        this.subs.forEach(関数(sub) {
            sub.update(); //各サブスクライバーに更新を確認するよう通知する})
    }
}
依存関係ターゲット = null;

関数ウォッチャー(vm,exp,cb) {
    this.vm = vm; //SelfVue のスコープを指す this.exp = exp; //バインディング プロパティのキー値 this.cb = cb; //クロージャ this.value = this.get();
}

ウォッチャー.プロトタイプ = {
    更新:関数() {
        これを実行してください。
    },
    実行:関数() {
        var 値 = this.vm.data[this.exp];
        var oldVal = this.value;
        if(値 !== oldVal) {
            this.value = 値;
            this.cb.call(this.vm,値,oldVal);
        }
    },
    取得:関数() {
        Dep.target = this; // 自分自身をキャッシュします var value = this.vm.data[this.exp]; // リスナーで get 関数の実行を強制します Dep.target = null; // 自分自身を解放します return value;
    }
}

関数defineReactive(データ,キー,値) {
    観察(val);
    var dep = 新しい Dep();
    Object.defineProperty(データ、キー、{
        列挙可能: true、
        設定可能: true、
        取得: 関数() {
            if(Dep.target) { // サブスクライバーを追加するかどうかを判断します dep.addSub(Dep.target);
            }
            戻り値:
        },
        設定: 関数(newVal) {
            場合 (val === newVal) {
                戻る;
            }
            val = 新しいVal;
            console.log('property' + key + ' が監視されており、現在の値は次のとおりです: "' + newVal.toString() + '"');
            dep.notify(); // データが変更された場合は、すべてのサブスクライバーに通知します}
    });
}

<本文>
    <h1 id="名前">{{名前}}</h1>
</本文>

//オブザーバーとウォッチャーを関連付ける function SelfVue(data,el,exp) {
    this.data = データ;
    観察(データ);
    el.innerHTML = this.data[exp];
    新しいウォッチャー(this,exp,function(value) {
        el.innerHTML = 値;
    });
    これを返します。
}

<本文>
    <h1 id="名前"{{名前}}></h1>
</本文>

<script src="../js/observer.js"></script>
<script src="../js/Watcher.js"></script>
<script src="../js/SelfVue.js"></script>

<スクリプト>
     var ele = document.querySelector('#name');
     var selfVue = 新しいSelfVue({
         名前: 'hello world'
     },ele,'名前');

     ウィンドウ.setTimeout(関数() {
         console.log('名前の値が変更されました');
         selfVue.name = 'さようなら世界';
     },2000);
</スクリプト>

関数SelfVue(データ,el,exp) {
    var self = this;
    this.data = データ;
    //Object.keys() メソッドは、指定されたオブジェクトの列挙可能なプロパティの配列を返します。Object.keys(data).forEach(function(key) {
        self.proxyKeys(key); // プロキシ属性をバインドする });
    観察(データ);
    el.innerHTML = this.data[exp]; // テンプレートデータの値を初期化する new Watcher(this,exp,function(value) {
        el.innerHTML = 値;
    });
    これを返します。
}

SelfVue.プロトタイプ = {
    proxyKeys:function(キー) {
        var self = this;
        Object.defineProperty(this,key,{
            列挙可能:false、
            設定可能:true、
            取得:関数proxyGetter() {
                self.data[キー]を返します。
            },
            設定:関数 proxySetter(newVal) {
                self.data[キー] = newVal;
            } 
        });
    }
}

ノードToFragment:function(el) {
        varfragment = document.createDocumentFragment(); //createdocumentfragment() メソッドは、すべてのプロパティとメソッドを含む仮想ノード オブジェクトを作成します。
        var child = el.firstChild;
        while(子) {
            // Dom 要素をフラグメントに移動します。fragment.appendChild(child);
            子 = el.firstChild;
        }
        フラグメントを返します。
    }

//各ノードを走査し、関連する仕様を含むノードに対して特別な処理を実行する compileElement:function(el) {
        var childNodes = el.childNodes; //childNodes プロパティは、ノードの子ノード コレクションを NodeList オブジェクトとして返します。
        var self = this;
        //slice() メソッドは、既存の配列から選択された要素を返します。
        [].slice.call(childNodes).forEach(function(node) {
            var reg = /\{\{(.*)\}\}/;
            var text = node.textContent; //textContent プロパティは、指定されたノードのテキスト コンテンツを設定または返します。if(self.isTextNode(node) && reg.test(text)) { //{{}} 命令を満たしているかどうかを判断します。//exec() メソッドは、文字列内の正規表現の一致を取得するために使用されます。
                // 一致する結果を含む配列を返します。一致するものが見つからない場合、戻り値は null になります。
                自己.compileText(ノード、reg.exec(テキスト)[1]);
            }
            if(node.childNodes && node.childNodes.length) {
                self.compileElement(node); // 子ノードを再帰的に走査し続けます}
        });
    },
    compileText:function(node,exp) {
        var self = this;
        var initText = this.vm[exp];
        this.updateText(node,initText); // 初期化されたデータをビューに初期化します new Watcher(this.vm,exp,function(value) {
            自己更新テキスト(ノード、値)。
        });

    },
    updateText:function(ノード,値) {
        node.textContent = typeof value == 'undefined' ? '': value;
    },

関数SelfVue(オプション) {
    var self = this;
    this.vm = これ;
    オプションデータ
    Object.keys(this.data).forEach(function(key) {
        self.proxyKeys(key); // プロキシ属性をバインドする });
    オプションのデータを観察します。
    新しいコンパイル(options.el、this.vm);
    これを返します。
}

<本文>
    <div id="アプリ">
        <h1>{{タイトル}}</h1>
        <h2>{{名前}}</h2>
        <h3>{{コンテンツ}}</h3>
    </div>
</本文>
<script src="../js/observer2.js"></script>
<script src="../js/Watcher1.js"></script>
<script src="../js/compile1.js"></script>
<script src="../js/index3.js"></script>


<スクリプト>
    var selfVue = 新しいSelfVue({
        el:'#app',
        データ：{
            タイトル:'aaa',
            名前:'bbb',
            コンテンツ:'ccc'
        }
    });
    ウィンドウ.setTimeout(関数() {
        selfVue.title = 'ddd';
        selfVue.name = 'eee';
        selfVue.content = 'fff'
    },2000);
</スクリプト>

コンパイル:関数(ノード) {
        var nodeAttrs = node.attributes; //attributes 属性は、指定されたノード、つまり NamedNodeMap の属性セットを返します。
        var self = this;
        //Array.prototype プロパティは、Array コンストラクターのプロトタイプを表し、すべての Array オブジェクトに新しいプロパティとメソッドを追加できるようにします。
        //Array.prototype自体は配列です
        Array.prototype.forEach.call(nodeAttrs,function(attr) {
            var attrName = attr.name; //イベントメソッド名とプレフィックスを追加します: v-on:click="onClick"、次に attrName = 'v-on:click' id="app" attrname= 'id'
            （自己.isDirective（属性名））の場合{     
                var exp = attr.value; //イベントメソッド名とプレフィックスを追加します: v-on:click="onClick", exp = 'onClick'

                //substring() メソッドは、文字列内の指定された 2 つの添え字間の文字を抽出するために使用されます。戻り値は新しい文字列です //dir = 'on:click'
                var dir = attrName.substring(2);  
                if(self.isEventDirective(dir)) { //イベントディレクティブ self.compileEvent(node,self.vm,exp,dir);
                }else { //v-model ディレクティブ self.compileModel(node,self.vm,exp,dir);
                }

                ノードの属性を削除します。
            }
        });
    }

関数SelfVue(オプション) {
    var self = this;
    オプションデータ
    this.methods = オプション.methods;
    Object.keys(this.data).forEach(function(key) {
        self.proxyKeys(キー);    
    });
    オプションのデータを観察します。
    新しいコンパイル(options.el、this);
    オプションをマウントして呼び出します(これを);
}

<本文>
    <div id="アプリ">
            <h2>{{タイトル}}</h2>
            <input v-model="名前">
            <h1>{{名前}}</h1>
            <button v-on:click="clickMe">クリックしてください!</button>
    </div>
</本文>

<script src="../js/observer3.js"></script>
<script src="../js/Watcher1.js"></script>
<script src="../js/compile2.js"></script>
<script src="../js/index4.js"></script>
<スクリプト>
    新しいSelfVue({
        el: '#app',
        データ： {
            タイトル: 'hello world'、
            名前: 'canfoo'
        },
        メソッド: {
            クリックミー: 関数 () {
                this.title = 'こんにちは世界';
            }
        },
        マウント: 関数 () {
            ウィンドウ.setTimeout(() => {
                this.title = 'こんにちは';
            }, 1000);
        }
    });
</スクリプト>