平时用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>
千里之行
始于足下