技術標籤：Vue

平時用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>

千里之行
始於足下