Vueレンダリングと更新の実装プロセス全体

ステップ1 templateテンプレートの解析

テンプレートで使用されるdataの属性を、すべてJS変数

に変更します.

テンプレート内のVue命令(v-for,v-modelなど)をJSロジック

に変更

最終的に、with関数でテンプレートをパラメータとして入力し、render関数を返し、render関数は最終的にVnodeオブジェクトを返します.

  

    

      
      add
    
    

      

        
{{item}}
      
    
  

//render  
with (this) {
  return _c(
    'div',
    {
      attrs: { "id": "app" }
    },
    [
      _c(
        'div',
        [
          _c(
            'input',
            {
              directives: [
                {
                  name: "model",
                  rawName: "v-model",
                  value: (title),
                  expression: "title"
                }],
              attrs: { "type": "text" },
              domProps: { "value": (title) },
              on: {
                "input": function ($event) {
                  if ($event.target.composing) return;
                  title = $event.target.value
                }
              }
            }
          ),
          _v(" "),  //                 
          _c(
            'button',
            {
              on: { "click": add }
            },
            [
              _v("add")
            ]
          )
        ]
      ),
      _v(" "), //                 
      _c(
        'div',
        [_c(
          'ul',
          _l(
            (lists), function (item, index) { return _c('li', { key: index }, [_v(_s(item))]) }
          )
        )
        ]
      )
    ]
  )
}

ステップ2では、応答式を作成し、データの変更をリスニングします.

Object.defineProperty+パブリッシュ-サブスクリプションモードで、最終的に双方向バインドを実現し、データの変化を傍受します.

ステップ3、最初のレンダリング、ページの表示

render関数を実行するとdataのデータにアクセスしgetメソッド

をトリガする

updateComponentを実行し、まずvdomのpatchメソッド

を行います.

次に、vnodeをDOMにレンダリングし、初回レンダリングは

を完了する.
ステップ4、dataプロパティの変更、ページの更新

は属性を変更し、応答式setによって

に傍受する.

setでupdateComponent

を実行

updateComponent再実行、render関数

をトリガー

patchアルゴリズムにより新旧のVnodeオブジェクトを比較し、パッチ適用を行う

従来のdom構造を修正し、ページ

を更新する
作者:泡杯感冒霊链接:https://www.jianshu.com/p/9e6e70643253出典:簡書の著作権は作者の所有である.商業転載は著者に連絡して許可を得てください.非商業転載は出典を明記してください.