render函数个人理解及浅析

render函数个人理解及浅析

· 官方例子

<div id="app">
	  <!-- 锚点定位超链 -->
      <h1>
        <a name="hello-world" href="#hello-world">
          Hello world!
        </a>
      </h1>
      <!-- 锚点定位元素组件 -->
      <anchored-heading :level="1">Hello world!</anchored-heading>
      <anchored-heading :level="2">Hello world!</anchored-heading>
      <anchored-heading :level="3">Hello world!</anchored-heading>
      <anchored-heading :level="4">Hello world!</anchored-heading>
      <anchored-heading :level="5">Hello world!</anchored-heading>
      <anchored-heading :level="6">Hello world!</anchored-heading>
    </div>
    <!-- x-template形式定义组件 -->
    <script type="text/x-template" id="anchored-heading-template">
      <h1 v-if="level === 1">
        <slot></slot>
      </h1>
      <h2 v-else-if="level === 2">
        <slot></slot>
      </h2>
      <h3 v-else-if="level === 3">
        <slot></slot>
      </h3>
      <h4 v-else-if="level === 4">
        <slot></slot>
      </h4>
      <h5 v-else-if="level === 5">
        <slot></slot>
      </h5>
      <h6 v-else-if="level === 6">
        <slot></slot>
      </h6>
    </script>

    <script>
      Vue.component("anchored-heading", {
        template: "#anchored-heading-template", //用id引用模板
        props: {
          level: {
            type: Number,
            required: true,
          },
        },
      });
      new Vue({
        el: "#app",
      });
    </script>

· 问题

1. 代码非常的冗长
2. 在每一个级别的标题中重复书写了 ，在要插入锚点元素时还要再次重复

· 用render函数重写

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

· 解析一下

render: function (createElement) {
    return createElement(
	  // 第一个参数（必选）：元素标签
      'div', 
      //第二个参数（可选）：由元素各种属性和组成的数据对象
	  {
		class:'test'  
	  },
	  //第三个参数（可选）：由内容或者子节点组成的数组(也可以只是字符串)
	  [
		'test', 
		createElement('span','test')
	  ]
    )
  }

1. render是一个函数

2. 参数是createElement

3. createElement也是个函数，返回值如下：

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9kPemgcP-1590114424842)(E:\前端\learning_note\QQ截图20200522100040.png)]

   VNode在vue的虚拟节点，涉及到虚拟DOM，此处不展开。相当于返回一串HTML代码，render函数帮我们渲染到视图上

· 总结

1. 优点：render函数能帮我们最大化利用javascript代码创建组件，丰富一些诸如v-for，v-if指令做不到的细节，做一些单纯写template做不到骚操作，不过官方例子还用到了$slots这个vue官方的API，要先去了解一下
2. 缺点：比较抽象