VUE操作機構

[画像ソースステーションは、セキュリティチェーン機構を有していてもよい、チェーンが失敗したダンプ、直接アップロードダウン画像を保存することをお勧めします（IMG-oZPPdV43-1583663123391）（./ IMGS / VUE操作する機構.PNG）]

Vueの実行コアは、いくつかの段階に分かれています。

1）テンプレートのコンパイル：機能の再利用可能なレンダリング生成

2）応答：双方向バインディング、オブジェクトのプロパティを取得および設定するObject.definedPropertyを聴くことにより、

3）初期レンダリング：機能の実行をレンダリングし、内のデータへのアクセスの値は、VDOMを生成するためのパッチメソッドを呼び出し、GETを監視されます

4）データの変更：変更は、データセットをトリガーする、ビューを更新し、古いものと新しいパッチのvnodeの比較の方法により、再描画更新されます

テンプレートのVueを解析する方法

テンプレートとは何ですか
- エッセンス：テンプレートが文字列であります
- HTMLのようなフォーマットを有するが、テンプレートは、JSの変数は、他のV-ため、V-かのように、埋め込むことができ、論理的です
- 最終的にHTMLを表示する必要がテンプレートによって生成されたビュー
- テンプレートは、最初のJSコードに変換する必要があります
  - あります（V-場合、V-用）、JSを使用する（チューリング完全で）実装されなければならない論理
  - ページをレンダリングするために、HTMLに変換、あなたはJSするために実装する必要があります
  - そのため、テンプレートのレンダリング機能に変換されます
機能をレンダリング
- 関数テンプレートは、すべての情報、リターンvノード、テンプレートのロジックを解く（V-ため、V-IF）の問題を含んでいるレンダリング
- 最終的には、関数が生成されたレンダリングどのように見つけるか
  、VUE源を見つけるのsrc /コンパイラ/コード生成/レンダリング index.js、生成関数の戻り値を
機能とVDOMをレンダリング
- テンプレートはHTMLを生成します。vm._c
- Hはvm._c関数とsnabbdomように達成する、パラメータとして渡されたタグ、属性、サブエレメント
- VDOMのVue.jsはsnabbdomを描く達成しました
- updateComponentパッチはVDOMに実装されています
- 最初のページレンダリングの実行updateComponent
- 各変更データ属性では、updateComponent行われ

Vueの操作機構

最初のステップ：テンプレートの解析機能をレンダリングします：

あなたは、第一世代の機能をパッケージ化するとき、なぜをレンダリングすることです知っている必要がありますか？私たちは、このローダーのVUEのテンプレートコンパイラに使用しているときのWebPACKが詰め、その役割は、コンパイラが最初のステップですのでという、機能をレンダリングするテンプレートをコンパイルすることで、応答性のリスニングは、コード実行までの時間です。
解析にコンパイルコンパイル、最適化は、三つの部分を生成します
- パース：抽象構文木にテンプレートを解析
- 最適化：各再レンダリング、DOMは、我々は静的サブツリーを呼び出す部分を、変更する必要がない、記憶部は、プロセスが再レンダリング再びそれをレンダリングしない、定数に分離することができます、もはや後ろのパッチプロセスが変更されないように私たちの共通の基本的なHTMLのヘッダとして、それを無視します。
- さらに最適化静的ツリーを生成し、（コードである$ {コード}）、すなわちvnodeのプロセスは、DOMツリーを生成する仮想ASTを生成する：生成します。
```
function generate (
  ast: ASTElement | void,
  options: CompilerOptions
): CodegenResult {
  const state = new CodegenState(options)
  const code = ast ? genElement(ast, state) : '_c("div")'
  return {
    render: `with(this){return ${code}}`,
    staticRenderFns: state.staticRenderFns
  }
}
```

vue demo

<div id="app">
  <p>普通属性：{{ message }}</p>
  <p>{{msg()}}</p>
  <p>{{ct}}</p>
  <input v-model="message">
  <div v-for="item in items">
      {{ item.text }}
    </div>
    <button v-on:click="bindClick">点我抓同伟</button>
</div>

// js
new Vue({
  el: '#app',
  data: {
    message: '以vue的名义',
    items: [{
        text: '达康书记'
    }, {
        text: '育良书记'
    }]
  },
  methods: {
    bindClick: function() {
        this.message = '这就抓同伟去';
    },
    msg: function() {
        return this.message + "这个方法每次都会执行";
    }
  },
  computed: {
    ct: function()　{
        return this.message + "计算属性并不会每次都执行";
    }
  }
})

機能をレンダリングに対応

with(this) {
    return _c('div', {
        attrs: {
            "id": "app"
        }
    },
    [_c('p', [_v("普通属性：" + _s(message))]), _v(" "), _c('p', [_v(_s(msg()))]), _v(" "), _c('p', [_v(_s(ct))]), _v(" "), _c('input', {
        directives: [{
            name: "model",
            rawName: "v-model",
            value: (message),
            expression: "message"
        }],
        domProps: {
            "value": (message)
        },
        on: {
            "input": function($event) {
                if ($event.target.composing) return;
                message = $event.target.value
            }
        }
    }), _v(" "), _l((items),
    function(item) {
        return _c('div', [_v("\n\t\t  " + _s(item.text) + "\n\t   ")])
    }), _v(" "), _c('button', {
        on: {
            "click": bindClick
        }
    },
    [_v("点我出奇迹抓同伟")])], 2)
}

データ情報テンプレート変数は、JSになってきました
V-モデルテンプレート、V-場合、V-のためのJSのロジックAへ
https://www.jianshu.com/p/fc0084c97e05説明するよう機能は、仮想ツリーのvノードを返すレンダリング

ステップ2：応答の開始リスニング

オブジェクトのプロパティObject.definedProperty getおよびセットを聞くことによって、プロセスがオブザーバーに封入されています
VMへのエージェントの性質に関するデータ

第三段階：最初のレンダリングは、ページと結合依存関係を表示します

初期のレンダリング、実行updateComponent（責任パッチ）、（vm._renderを実行）
機能実行をレンダリングする、データ内のデータにアクセスし、モニタへのアクセスを得るために応答する、コレクト（ウォッチャー）依存得るのメッセージ加入者（DEP）に添加しました
実行updateComponentは、パッチ法のDOMに来ます
パッチは、VDOM初めてのレンダリングが完了し、実際のDOMにレンダリングされます
質問：なぜ我々が得る聞く必要があるのではなく、セット？
- 多くのプロパティ内のデータは、一部が使用されているので、いくつかは、使用されていません
- プロパティで使用される取得のみを移動します
- あなたが取りに行くしない場合は、ケアの時間を設定していません
- これにより、不要なレンダリングを回避します

ステップ4：データの変更、再レンダリングトリガーされます

モニターへのデータの変更、セット
実行updateComponentを設定
updateComponent再実行vm._render（）
VNODE新しく生成されたとvnodeのコントラストの前に、パッチを比較することにより、
違いは、HTMLにレンダリング

参考：
https://www.cnblogs.com/dora-zc/p/11111813.html#vue-%E5%A6%82%E4%BD%95%E8%A7%A3%E6%9E%90%E6 ％A8％A1％E6％9D ％BF

HiGIS-DBRG

公開された59元の記事・ウォン称賛22 ・ビュー40000 +

プライベートの手紙の懸念