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>
Logo

前往低代码交流专区

更多推荐