vue render函数简单解析

平时用render 非常少。当然vue3 对template 模式优化，其速度和render几乎无异。但是对简单的组件其实用render模式则更加优雅。

创建一个全屏小组件

template

<template>
  <i class="el-icon-full-screen" @click="toggleScreen"></i>
</template>
<script>
const screenfull = require("screenfull");
export default {
  name: "ScreenFull",
  methods: {
    toggleScreen() {
      screenfull.toggle();
    }
  }
};
</script>

render函数渲染

通过render函数中的createElement参数并返回该vnode。当然其内部还是做了vnode进行转换为dom的过程。

createElement

对于createElement方法 的参数。官网说的很清楚

    /**
     * @param {String | Array} tagElement  子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，也可以使用字符串来生成“文本虚拟节点”。可选。
     * @param {Object} data 非必填， 一个与模板中 attribute 对应的数据对象。
     * @param {String | Object | Function} tag 必填，   一个 HTML 标签名、组件选项对象，或者resolve 了上述任何一种的一个 async 函数
     */
    createElement(tag, data, tagElement) {}

data

需要注意的是对于data选项中的on事件中的click接受的是一个匿名函数。

如下render 写法

<script>
const screenfull = require("screenfull");
export default {
  name: "ScreenFull",
  render(h) {
    return h("i", {
      class: "el-icon-full-screen",
      on: {
        click: () => {
          this.toggleScreen();
        }
      }
    });
  },
  methods: {
    toggleScreen() {
      screenfull.toggle();
    }
  }
};
</script>

千里之行
始于足下