Vue の学習はいつから始められますか?
学習ルート: H5 + CSS3 ---> ES6 ---> ネットワーク ---> サードパーティ ライブラリ ---> エンジニアリング ---> Vue
Vue を学ぶには前に予習したことを経由する必要があり、たとえ学んだとしても過去に戻って知識を補う必要があります。
Vueを表示
Vue のソースコード分析、作者の内なる世界へ
Vueインスタンスを作成する
let vm = new Vue();構成オブジェクト、データ
let vm = new Vue({
/* 配置对象 */
el: '.container',
data: {
title: '陶冬手机',
},
});Vue は、インターフェイスとデータが分離されていると教えてくれます。開発中に注意する必要があるのは 2 つのことだけです。1 つはインターフェイス データがどのように見えるか、もう 1 つはデータに基づいてインターフェイスがどのように生成されるかです。インターフェイスがどのように見えるかを決定します
データレスポンシブ
低ランク: データの変更によりインターフェースの自動更新がトリガーされます。
高いランク： ？
ある関数を呼び出してデータの表示を実行し、データが変更された場合、インターフェースはどのように同期すればよいでしょうか?
このデータに依存する関数を呼び出すことでインターフェースを更新できますが、データが変更されるたびに手動で呼び出してインターフェースを更新する必要があり面倒です
したがって、依存する関数を自動的に呼び出してインターフェイスの更新を完了し、データとインターフェイスの統合を実現できるようにデータを変更できますか。
それを達成するにはどうすればよいでしょうか?
Object.defineProperty() データハイジャック
属性値を中間変数に代入し、get 関数で中間変数を返します。
set 関数の値を再割り当てし、パラメータを中間変数にして、依存関数を呼び出します。
普遍的ではないため、オブジェクトのすべてのプロパティを観察する必要があります
Observe はオブジェクトのすべてのプロパティを観察します
各プロパティを反復処理し、各プロパティに対して Object.defineProperty() ハイジャックを使用します。
この属性に依存する関数を自動的に呼び出す
set 関数と get 関数の組み合わせ
どの関数がこのプロパティに依存しているのかわかりません。どうすればよいでしょうか?
まず、ここでの依存関係とは何を指すのかを理解してください。
これは、関数が操作中にこの属性を使用することを意味します。より正確には、関数が操作中にこの get メソッドを使用することを意味します。
関数の取得、依存関係のコレクション、記録: どの関数が私を使用しているか
Set は再割り当てのみを知っており、どの関数がこの属性を使用しているかは知りませんが、get は知っています
関数を設定、更新をディスパッチ、実行: 関数を実行
核となるアイデア:
get関数で属性ごとに配列を作成します。
set 関数内で、各関数を横断して呼び出します。
各関数を走査して呼び出すときに、同じ関数を 2 回呼び出す必要はありません。
配列内の関数の一意性を保証するため、set を使用して関数で構成される配列の重複を排除するか、include を使用して判断します
セットメソッド
練習も含まれます
abc を処理しています。どの関数が呼び出されているか
呼び出す前に、実行中の関数名をグローバル変数に割り当て、関数を呼び出し、変数を null に割り当てます。
入力双方向データバインディング
結論として、データ応答性の本質は、データが変更されたときに関連する機能を自動的に実行することです。
低ランク: データの変更によりインターフェースの自動更新がトリガーされます。
高ランク: その本質は、データが