Vue を使用して基礎となる原則を実装する (詳細なチュートリアル)

Vue の基本的な実装原則に関する知識ポイントの概要を説明します。必要な場合は、それから学び、私たちがまとめた内容が役立つことを願っています。

まえがき

最近、Vueの原理の分析と双方向バインディングMVVMの実装について勉強している記事です。勉強しながら考えたことをまとめます。

Vue は典型的な MVVM フレームワークであり、モデルを変更すると、ビューが自動的に更新されます。この設計により、状態管理が非常にシンプルかつ直感的になります。では、Vue はモデルとビューをどのように関連付けるのでしょうか?

実装原理の概要

これは、序文で述べた記事のコードであり、Vue の特徴を体現する典型的なコードです:

<p id="mvvm-app">
  <input type="text" v-model="word">
  <p>{{word}}</p>
  <button v-on:click="sayHi">change model</button> //点击这个button，word的值会发生改变
</p>

<script src="./js/observer.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/compile.js"></script>
<script src="./js/mvvm.js"></script>
<script>
  var vm = new MVVM({
    el: &#39;#mvvm-app&#39;,
    data: {
      word: &#39;Hello World!&#39;
    },
    methods: {
      sayHi: function() {
        this.word = &#39;Hi, everybody!&#39;;
      }
    }
  });
</script>

ue この双方向データ バインディングの効果を実現するには、次の 3 つの主要なコードを実行します。モジュールが必要です:

Observer : データオブジェクトのすべての属性を監視でき、変更がある場合は最新の値を取得し、サブスクライバーに通知できます。

Compile : 各要素ノードの命令をスキャンして解析し、命令テンプレートに従ってデータを更新し、対応する Update 関数をバインドします

Watcher: オブザーバーとコンパイルを接続するブリッジとして、各プロパティ変更の通知をサブスクライブして受信し、命令によってバインドされた対応するコールバック関数を実行して、更新することができますビュー

Observer

Observer の中心となるのは、データの変更を監視するための Object.defineProperty() であり、データが変更されるたびに setter がトリガーされます。このとき、オブザーバーはサブスクライバーに通知し、サブスクライバーがウォッチャーになります。

Watcher

Watcher サブスクライバは、Observer と Compile の間の通信のブリッジとして機能します。主に行うことは次のとおりです:

1. それ自体をインスタンス化するときに、プロパティ サブスクライバ (dep) に追加します

2. 更新が必要です。 () メソッド

3. は、dep.notice() によってプロパティの変更が通知されたときに独自の update() メソッドを呼び出し、Compile

Compile

でバインドされたコールバックをトリガーできます。テンプレート命令を解析し、テンプレート内の変数をデータに置き換えてから、レンダリング ページ ビューを初期化し、更新関数を各命令に対応するノードにバインドし、データが変更されたら通知を受け取り、データを監視するサブスクライバを追加します。ビューを更新します。

上記は私があなたのためにまとめたものです。

関連記事:

Bootstrapは、折りたたみ可能なグループ化サイドナビゲーションメニューを実装します

layuiテーブルのチェックボックスの選択例、すべてを選択するスタイルと機能の例

layui選択オプションを動的に追加する例

以上がVue を使用して基礎となる原則を実装する (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。