vue中的render函数

---

前言

本文主要内容是讲，什么是render函数，及render函数在vue2和vue3中的使用方式。

---

一、render函数是什么？

什么是render函数？可能很多小伙伴不太清楚，可能你们在vue2版本时，在实例化Vue的时候见过这个方法，知道有这个东西，但是它具体是怎么使用的就不太清楚了。

---

我们在使用vue进行开发的时候一般都是使用template模板语法进行页面结构编写，其实我们也可以不使用template模板，vue给我们提供了render方法，我们也可以使用这个来进行编写，render函数其实就是optionsAPI的一个选项，和我们的datat，components，computed等，这些是一样的，只是功能不一样。

---

当我们引入一个组件，vue在解析的时候就会查看你使用的是template语法，还是render函数，如果使用的是template语法，vue内部会使用vue-loader对模板进行解析，将模板中的结构转成Vdom，而使用render函数的话，vue则会调用render函数，render函数会返回应对的Vdoom，可能有的小伙伴就会问，这个不需要使用什么loader进行解析吗？是的，不需要。为什么呢？因为render函数返回的就是Vdom，下面我们的另一位大咖登场。

---

它就是h函数，h函数的主要作用就是可以直接创建虚拟VDOM。

二、使用方式

1.在vue2中使用

import Home from "../components/Home.vue";
export default {
  data() {
    return {
      counter: 0,
    };
  },
  methods: {
    increment() {
      this.counter++;
    },
    decrement() {
      this.counter--;
    },
  },
  render() {
    return h("div", { class: "app" }, [
      h("h2", null, `当前计数：${this.counter}`),
      h("button", { onClick: this.increment }, "+1"),
      h("button", { onClick: this.decrement }, "-1"),
      h(Home),
    ]);
  },
};
</script>

2.在vue3setup中使用

在vue3中使用使用render函数和vue2还是优点区别的：
setup函数返回一个函数，该函数返回Vdom

<script>
import { h, ref } from "vue";
import Home from "../components/Home.vue";
export default {
  setup() {
    const counter = ref(0);

    const increment = () => {
      counter.value++;
    };
    
    const decrement = () => {
      counter.value--;
    };

    return () =>
      h("div", { class: "app" }, [
        h("h2", null, `当前计数：${counter.value}`),
        h("button", { onClick: increment }, "+1"),
        h("button", { onClick: decrement }, "-1"),
        h(Home),
      ]);
  },
};

3.在vue3setup语法糖中使用

在setup语法糖中使用，需要注意，此时也是需要template的，我们讲rennder函数定义成一个方法，在模板中使用对应名称的标签。

<template>
  <render />
</template>
<script setup>
import { h, ref } from "vue";
import Home from "../components/Home.vue";
const counter = ref(0);

const increment = () => {
  counter.value++;
};

const decrement = () => {
  counter.value--;
};

const render = () =>
  	h("div", { class: "app" }, [
    h("h2", null, `当前计数：${counter.value}`),
    h("button", { onClick: increment }, "+1"),
    h("button", { onClick: decrement }, "-1"),
    h(Home),
  ]);
</script>

---

总结

以上就是本此的全部内容，希望对阅读本篇文章的你有所帮助，欢迎各位小伙伴留言~