Vue render code 示例

Vue render code 示例：

<div id="demo">
  <h1>Latest Vue.js Commits</h1>
  <template v-for="branch in branches">
    <input type="radio"
      :id="branch"
      :value="branch"
      name="branch"
      v-model="currentBranch">
    <label :for="branch">{{ branch }}</label>
  </template>
  <p>vuejs/vue@{{ currentBranch }}</p>
  <ul>
    <li v-for="record in commits">
      <a :href="record.html_url" target="_blank" class="commit">{{ record.sha.slice(0, 7) }}</a>
      - <span class="message">{{ record.commit.message | truncate }}</span><br>
      by <span class="author"><a :href="record.author.html_url" target="_blank">{{ record.commit.author.name }}</a></span>
      at <span class="date">{{ record.commit.author.date | formatDate }}</span>
    </li>
  </ul>
</div>

生成的render code 为：

_c(
   'div',
   {
     attrs:{"id":"demo"}
   },
   [
     _c(
       'h1',
       [ _v("Latest Vue.js Commits") ]
     ),
     _v(" "),
     _l(
        (branches),
        function (branch) {
             return [
                _c(
                    'input',
                    {
                      directives: [
                          {
                              name:"model",
                              rawName:"v-model",
                              value:(currentBranch),
                              expression:"currentBranch"
                          }
                      ],
                      attrs:{
                          "type":"radio",
                          "id":branch,
                          "name":"branch"
                      },
                      domProps: {
                          "value":branch,
                          "checked":_q(currentBranch,branch)
                      },
                      on:{
                          "change": function($event){currentBranch=branch}
                      }
                   }
                ),
                _v(" "),
                _c(
                    'label',
                    {
                      attrs:{"for":branch}
                    },
                    [ _v(_s(branch)) ]
                )
            ]
       }
    ),
    _v(" "),
    _c(
       'p',
       [ _v("vuejs/vue@"+_s(currentBranch)) ]
    ),
    _v(" "),
    _c(
       'ul',
       _l(
          (commits),
          function(record){
            return _c(
                      'li',
                      [
                        _c(
                          'a',
                          {
                            staticClass:"commit",
                            attrs:{"href":record.html_url,"target":"_blank"}
                          },
                          [ _v(_s(record.sha.slice(0, 7))) ]
                        ),
                        _v("\n          - "),
                        _c(
                          'span',
                          {staticClass:"message"},
                          [
                            _v(_s(_f("truncate")(record.commit.message)))
                          ]
                        ),
                        _c('br'),
                        _v("\n          by "),
                        _c(
                          'span',
                          {staticClass:"author"},
                          [
                            _c(
                              'a',
                              {attrs:{"href":record.author.html_url,"target":"_blank"}},
                              [
                              _v(_s(record.commit.author.name))
                              ]
                            )
                          ]
                        ),
                        _v("\n          at "),
                        _c(
                          'span',
                          {staticClass:"date"},
                          [_v(_s(_f("formatDate")(record.commit.author.date)))]
                        )
                      ]
              )
          }
       )
    )
   ],
   2
)

1.render 函数调用后，会进行视图模板的依赖收集。
2.__patch__(prevVnode, vnode) 负责newVnode 和oldVnode 的比对更新（diff）。

至此，结束。