Vue高级语法(三) | render函数和jsx的基本使用

小灰灰 2024-04-27 15:55 2阅读 0赞

#### 文章目录 ####

*   *  h函数的使用
     *   *  🍤h函数基本介绍
         *  🍤h函数使用流程
         *  🍤h函数案例练习
     *  jsx的体验
     *   *  🍤jsx的babel配置
         *  🍤jsx计数器案例

### 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()函数 如何使用呢？它接受三个参数**：

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

![在这里插入图片描述][4adbd7950331456da2f8ecef693a91a7.png_pic_center]

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

![在这里插入图片描述][4f5f31abac6746b49a6766a0f76529a0.png_pic_center]

> 第三个参数是元素的内容, 可以直接传入一个字符串, 表示创建出来元素的内容
> 
> 如果元素中有其他元素, 那么可以传入一个数组, 再次调用h()函数

![在这里插入图片描述][f976d565d8524862825406c20f83163c.png_pic_center]

**注意事项**：

> 如果没有props，那么通常可以将children作为第二个参数传入；
> 
> 如果会产生歧义，可以将null作为第二个参数传入，将children作为第三个参数传入；

#### 🍤h函数使用流程 ####

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

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

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

**我们先来看看在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></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了, 演示代码如下**

#### 🍤jsx计数器案例 ####

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

**Options API 的使用**

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

[4adbd7950331456da2f8ecef693a91a7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/c8e82bf7d1f84de5a3548229d106f6cc.png
[4f5f31abac6746b49a6766a0f76529a0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/63c3ee7669ab4d4e9856c0ac6f17e554.png
[f976d565d8524862825406c20f83163c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/d3633e5928b44be299526493fa2f09eb.png