在使用vue2时，如果想要渲染模板到页面，可以使用template模板渲染输出。

在vue3，可以选择使用render方法进行编程式的渲染。虽然vue2也有render，但用法已改变，如下：

  1. // 2.0 渲染函数
  2. export default {
  3.     render(h){
  4.       return h('div')
  5.   }
  6. }
  7. // 3.x语法
  8. export default {
  9.   render() {
  10.     return h('div')
  11.   }
  12. }

以上的函数，都会创建一个div标签的虚拟DOM节点。

虚拟DOM

虚拟DOM指的是，允许Vue在更新浏览器之前在内存中创建渲染组件。作用是：对已有的DOM进行比较，并修改部分更新实际DOM。

因此，在render返回的虚拟DOM节点中，在Vue生态里称为VNode，该接口是允许Vue在浏览器DOM中写入这些对象的接口。它们包含使用Vue所需的所有信息。

h函数

那么如何创建虚拟DOM呢？就需要用到h函数了，如果说render是渲染虚拟DOM，那么h就是创建虚拟DOM！使用方法为：h(标签名, {属性}, 内容)，如果是嵌套标签的写法，那就是h(标签名, {属性}, [继续嵌套h(省略)])。

实际上，h函数是createVNode()是一样的，但在vue3里createVNod函数比h函数多做了性能渲染，渲染速度更快。

如下使用例子：

  1. import {createApp} from 'vue';
  3. import {defineComponent, h, createVNode} from 'vue';
  4. import HelloWorld from "./components/HelloWorld.vue";
  5. const img = require('./assets/logo.png');
  7. const App = defineComponent({
  8.     render(){
  9.       return h("div", {id: "app"},[
  10.         h("img",{src: img}),
  11.       h(HelloWorld, {msg: "HelloWorld"}),
  12.       createVNode("h1", {class: "hello"}, "HelloWorld")
  13.     ])
  14.   }
  15. })
  16. createApp(App).mount("#app");

渲染结果如图：
image.png

使用编程式方式来代替Vue模板功能

平常，在使用Vue2的使用，很喜欢使用v-if、v-for、v-on等一些Vue模板功能，那么如何使用render和h来代替这些呢？

其实直接使用JS差不多，如代替v-if写法 ：

  1. //在模板是这样使用
  2. <ul v-if="items.length">
  3.   <li v-for="item in items">{{item.name}}</li>
  4. </ul>
  5. <p v-else>No items found</p>
  1. //使用编程式的写法
  2. props:['items'],
  3. render(){
  4.     if(this.items.length){
  5.         return h('ul',{},[
  6.       return h('li', item.name)
  7.     ])
  8.     }else {
  9.       return h('p', 'No items found')
  10.   }
  11. }

更多写法参考Vue官方文档！