Compare the single file SFC with the Render function in Vue2

Template render function compileToFunctions (parse, optimize, generate Vue components)

<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>

Copy the code

Compile resolves to the render function

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 }
Copy the code