h函数的使用

🍤h函数基本介绍

Vue推荐在绝大数情况下使用模板来创建你的HTML，然后一些特殊的场景，你真的需要JavaScript的完全编程的能力，这个时候你可以使用渲染函数，它比模板更接近编译器；

前面我们讲解过VNode和VDOM的概念：

Vue在生成真实的DOM之前，会将我们的节点转换成VNode，而VNode组合在一起形成一颗树结构，就是虚拟DOM （VDOM）；

事实上，我们之前编写的 template 中的HTML 最终也是使用渲染函数生成对应的VNode；

那么，如果你想充分的利用JavaScript的编程能力，我们可以自己来编写 createVNode 函数，生成对应的VNode；

我们可以使用 h()函数, 来自己编写createVNode函数：

h() 函数是一个用于创建 vnode 的一个函数；

其实更准确的命名是 createVNode() 函数，但是为了简便在Vue将之简化为 h() 函数；

h()函数 如何使用呢？它接受三个参数：

第一个参数表示创建的元素

第二个参数可选的, 可以传入null, 也可以传入一个要添加的属性的对象

第三个参数是元素的内容, 可以直接传入一个字符串, 表示创建出来元素的内容

如果元素中有其他元素, 那么可以传入一个数组, 再次调用h()函数

注意事项：

如果没有props，那么通常可以将children作为第二个参数传入；

如果会产生歧义，可以将null作为第二个参数传入，将children作为第三个参数传入；

🍤h函数使用流程

h函数可以在两个地方使用：

Options API 的render函数选项中；

setup函数选项中（setup本身需要是一个函数类型，函数再返回h函数创建的VNode）；

例如有如下一个template结构, 我们使用h函数创建出来

<template>
  <div class="app">
    <h2 class="title">我是标题</h2>
		 <p>我是内容</p>
  </div>
</template>

我们先来看看在Options API中的使用

import { h } from "vue"

export default {
  render() {
    return h("div", {className: "app"}, [
      h("h2", {className: "title"}, "我是标题"),
      h("p", null, "我是内容"),
    ])
  }
}

• render函数不仅可以传入普通元素, 也可以传入一个组件

import { h } from "vue"
import Home from "./home.vue"

export default {
  render() {
    return h("div", { className: "app" }, [
      // 因为不是在模板中使用, 因此无需注册, 直接使用
      h(Home)
    ])
  }
}

我们再来看看在Composition API中的使用

import { h } from "vue"

export default {
  setup() {
    // setup是一个函数, 让这个函数再返回一个函数
    return () => h("div", { class: "app" }, [
      h("h2", { class: "title" }, "我是标题"),
      h("p", null, "我是内容")
    ])
  }
}
</script>

🍤h函数案例练习

在Options API 中使用h函数完成计数器

import { h } from "vue"

export default {
  data() {
    return {
      conter: 0
    }
  },
  render() {
    return h("div", { className: "app" }, [
      h("h2", null, `当前计数: ${this.conter}`),
      h("button", { onclick: this.increment }, "+"),
      h("button", { onclick: this.decrement }, "-")
    ])
  },
  methods: {
    increment() {
      this.conter ++
    },
    decrement() {
      this.conter --
    }
  },
}

在Composition API 中使用h函数完成计数器

import { h, ref } from "vue"

export default {
  setup() {
    const conter = ref(0)

    const increment = () => {
      conter.value ++
    }

    const decrement = () => {
      conter.value --
    }

    // setup是一个函数, 让这个函数再返回一个h函数
    return () => h("div", { class: "app" }, [
      h("h2", { class: "title" }, `当前计数: ${conter.value}`),
      h("button", { onclick: increment }, "+"),
      h("button", { onclick: decrement }, "-")
    ])
  }
}

• 如果是在<script setup>标签中使用h函数, 需要如下方式(会变得很繁琐)

<template>
  <!-- 将render函数变量写在temolate标签中 -->
  <render></render>
</template>

<script setup>
import { h, ref } from "vue"

const conter = ref(0)

    const increment = () => {
      conter.value ++
    }

    const decrement = () => {
      conter.value --
    }

    // 将这个render函数保存到一个变量中
    const render = () => h("div", { class: "app" }, [
      h("h2", { class: "title" }, `当前计数: ${conter.value}`),
      h("button", { onclick: increment }, "+"),
      h("button", { onclick: decrement }, "-")
    ])
</script>

我们发现, render函数虽然可以让我们使用JavaScript完全提升编程能力, 但是render函数使用起来比起之前是会变得更加繁琐, 因此我们开发中基本不使用rander函数

如果我们确实想要使用完全JavaScript编程, 那么在开发中, 我们更为常见的是使用接下来讲到的jsx

jsx的体验

在Vue中是支持jsx的, 凡是我们是比较少在Vue中使用jsx的, jsx在react中使用的更加广泛, 因此在这里我简单介绍一下jsx的基本使用, 后续在react中, 会给大家详细介绍jsx的使用方式, 以及各种细节

🍤jsx的babel配置

如果我们希望在项目中使用jsx，那么我们需要添加对jsx的支持：

jsx我们通常会通过Babel来进行转换（React编写的jsx就是通过babel转换的）；

对于Vue来说，我们只需要在Babel中配置对应的插件即可；

webpack环境下安装Babel支持Vue的jsx插件：npm install @vue/babel - plugin -j sx -D

在babel.config.js配置文件中配置插件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    "@vue/babel-plugin-jsx"
  ]
}

如果是Vite环境下，需要安装插件：npm install @vitejs/plugin-vue-jsx -D

在vite.config.js配置文件中配置插件

import jsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    jsx()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
}

配置完成后我们就可以直接使用jsx了, 演示代码如下

import jsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    jsx()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
}

🍤jsx计数器案例

通过计数器的案例, 我们来体验一下jsx的使用吧

Options API 的使用

<!-- 告知script标签使用jsx -->
<script lang="jsx">
export default {
  data() {
    return {
      counter: 0
    }
  },
  render() {
    // jsx中使用大括号引用js中的语法
    return (
      <div class="app">
        <h2>当前计数: { this.counter }</h2>
        <button onclick={ this.increment }>+</button>
        <button onclick={ this.decrement }>-</button>
      </div>
    )
  },
  methods: {
    increment() {
      this.counter ++
    },

    decrement() {
      this.counter --
    }
  },
}
</script>

Composition 中的使用

<!-- 告知script标签使用jsx -->
<script lang="jsx">
import { ref } from "vue"

export default {
  setup() {
    const counter = ref(0)

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

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


    return () => (
      <div class="app">
        <h2>当前计数: { counter.value }</h2>
        <button onclick={ increment }>+</button>
        <button onclick={ decrement }>-</button>
      </div>
    )
  }
}
</script>