Vue2中单文件SFC与render函数对比

记录下Vue源码中template的编译产物render函数 由compileToFunctions构造，其中经历三个阶段、parse、optimize、generate Vue组件代码如下

<template>
  <div style="width:600px;margin:0 auto">
    <tree-node
     
      :node="nodeData"
      node-key="id"
      label-key="clickCount"
      :expandAll="true"
      @node-item-click="click"
    />
    <bt-md   v-if="false"/>
  </div>
</template>
<script>
import TreeNode from "../components/TreeNode.vue";
import BtMd from "../components/bt-md/index.vue";
export default {
  components: {
    TreeNode,
    BtMd,
  },
  data() {
    return {
      nodeData: [],
    };
  },
  created() {
    this.initMockData();
  },
  methods: {
    async initMockData() {
      const res = await this.$api.get("/tree");
      this.nodeData = res.data;
    },
    click({ data }) {
      console.log(`id: ${data.id}  click:${data.clickCount}`);
    },
  },
};
</script>

经过Compile解析为render函数

var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    { staticStyle: { width: "600px", margin: "0 auto" } },
    [
      _c("tree-node", {
        attrs: {
          node: _vm.nodeData,
          "node-key": "id",
          "label-key": "clickCount",
          expandAll: true
        },
        on: { "node-item-click": _vm.click }
      }),
      false ? _c("bt-md") : _vm._e()
    ],
    1
  )
}
var staticRenderFns = []
render._withStripped = true

export { render, staticRenderFns }