跳到主要内容

render

2023年05月06日
柏拉文
越努力，越幸运

一、认识​

render 用于编程式地创建组件虚拟 DOM 树的函数。render 是字符串模板的一种替代，可以使你利用 JavaScript 的丰富表达力来完全编程式地声明组件最终的渲染输出。预编译的模板，例如单文件组件中的模板，会在构建时被编译为 render 选项。如果一个组件中同时存在 render 和 template，则 render 将具有更高的优先级。

二、语法​

render() 函数可以访问同一个 this 组件实例, 除了返回一个单独的 VNode 之外, 还可以返回字符串或者数组。

2.1 返回 Vnode​

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
  data() {
    return {
      msg: "嘻嘻",
    };
  },
  render() {
    return this.msg;
  },
});
</script>

2.2 返回单独 VNode​

<script lang="ts">
import { defineComponent,h } from "vue";

export default defineComponent({
  name: "App",
  data(){
    return {
      msg: "嘻嘻"
    }
  },
  render(){
    return h('div',{ class: "div-container"}, this.msg)
  }
});

</script>

2.3 返回 VNode 数组​

<script lang="ts">
import { defineComponent, h } from "vue";

export default defineComponent({
  name: "App",
  data() {
    return {
      msg: "嘻嘻",
    };
  },
  render() {
    return [
      h("div", { class: "div-container" }, this.msg),
      h("div", { class: "div-wrapper" }, "哈哈"),
    ];
  },
});
</script>