在 Vue 3 中，渲染函数（render function）提供了一种编程方式来描述组件的输出，而不是使用模板语法。渲染函数在处理复杂的动态内容或在 JSX 语法更合适的场景中非常有用。

使用方法

  • 在 Vue 3 中使用渲染函数，可以通过 h 函数来创建虚拟节点（VNode）
//这里我们使用 h 函数创建了一个 div 元素，并将其内容设置为 'Hello, Vue 3 Render Function!'

<template>
  <div id="app"></div>
</template>

<script setup>
import { h } from 'vue'

const MyComponent = {
  setup() {
    return () => h('div', { class: 'hello' }, 'Hello, Vue 3 Render Function!')
  }
}
</script>
  •  JSX 语法：在 Vue 3 中也可以使用 JSX 语法，它与 React 中的 JSX 语法非常相似。

首先需要安装 Babel 插件：

npm install @vitejs/plugin-vue-jsx -D

 然后在 vite.config.js 中配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [vue(), vueJsx()]
})

 然后就可以在组件中使用 JSX：

<script setup>
import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  setup() {
    return () => <div class="hello">Hello, Vue 3 JSX!</div>
  }
})

export default MyComponent
</script>

 使用场景

  • 动态创建复杂的结构
<template>
  <div id="app"></div>
</template>

<script setup>
import { h } from 'vue'

const MyComponent = {
  setup() {
    const createList = () => {
      return h('ul', null, 
        [1, 2, 3].map(num => 
          h('li', { key: num }, `Item ${num}`)
        )
      )
    }

    return () => h('div', { class: 'list-container' }, createList())
  }
}
</script>
  • JSX 语法的使用场景

使用 JSX 语法可以更方便地与 JavaScript 集成，尤其是在有复杂逻辑或需要使用 JavaScript 表达式时：

<script setup>
import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  setup() {
    const items = [1, 2, 3]

    return () => (
      <div class="list-container">
        <ul>
          {items.map(item => (
            <li key={item}>Item {item}</li>
          ))}
        </ul>
      </div>
    )
  }
})

export default MyComponent
</script>
  • 与第三方库的集成

当需要与第三方库进行集成时，渲染函数提供了一种直接的方式来创建和操作 DOM 元素。例如，使用 D3.js 创建图表：

<template>
  <div id="app"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as d3 from 'd3'

const MyComponent = {
  setup() {
    onMounted(() => {
      const svg = d3.select('#app')
        .append('svg')
        .attr('width', 200)
        .attr('height', 200)

      svg.append('circle')
        .attr('cx', 100)
        .attr('cy', 100)
        .attr('r', 50)
        .attr('fill', 'blue')
    })

    return () => h('div', { id: 'app' })
  }
}
</script>

 总结

渲染函数在以下场景中非常有用：

  1. 动态创建复杂的结构：提供了更大的灵活性，可以通过编程方式创建和操作虚拟 DOM。
  2. 使用 JSX 语法：更方便地与 JavaScript 集成，适合在有复杂逻辑或需要使用 JavaScript 表达式的场景。
  3. 与第三方库的集成：直接创建和操作 DOM 元素，方便集成如 D3.js 这样的第三方库。

渲染函数是 Vue 提供的强大工具，当模板语法不够用时，可以考虑使用渲染函数来实现复杂的需求。

完整示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 Render Function with Styles</title>
    <script src="https://unpkg.com/vue@3.2.47"></script>
    <style>
        /* 定义一些全局样式 */
        .custom-class {
            font-family: Arial, sans-serif;
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
        }

        .button-class {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            border-radius: 8px;
        }

        .button-class:hover {
            background-color: #45a049;
        }
    </style>
</head>

<body>
    <div id="app"></div>

    <script>
        const { createApp, defineComponent, h, ref } = Vue;

        // 定义第一个自定义组件
        const CustomComponent = defineComponent({
            props: ['message'],
            render () {
                return h('div', { class: 'custom-class' }, [
                    h('h1', 'Hello from CustomComponent!'),
                    h('p', this.message)
                ]);
            }
        });

        // 定义第二个自定义组件
        const CustomComponent2 = defineComponent({
            props: ['message'],
            render () {
                return h('div', { class: 'custom-class' }, [
                    h('h1', 'Hello from CustomComponent2!'),
                    h('h1', {
                        style: { color: 'red' }
                    }, this.message)
                ]);
            }
        });

        // 创建 Vue 应用
        const App = defineComponent({
            setup () {
                const msg = ref('This is the initial message.');
                const showSecondComponent = ref(false);

                const updateMessage = () => {
                    msg.value = 'The message has been updated!';
                    showSecondComponent.value = !showSecondComponent.value;
                };

                return { msg, showSecondComponent, updateMessage };
            },
            render () {
                return h('div', [
                    this.showSecondComponent
                        ? h(CustomComponent2, { message: this.msg })
                        : h(CustomComponent, { message: this.msg }),
                    h('button', {
                        class: 'button-class',
                        onClick: this.updateMessage,
                        style: { marginTop: '10px' }
                    }, 'Toggle Component')
                ]);
            }
        });

        // 挂载 Vue 应用
        createApp(App).mount('#app');
    </script>
</body>

</html>

# vue.js # javascript # 前端
GitHub 加速计划 / vu / vue
109
19
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：4 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

1.8B 体积、33 种语言互译｜腾讯混元 HY-MT1.5-1.8B 多语言机器翻译模型上线

在跨语言交流日益频繁的今天，阅读外语菜单、处理多语言邮件、与不同语言背景的人沟通，已经成为很多人日常工作与生活的一部分。过去，这类需求往往依赖联网翻译工具，而如今，—— 一部设备即可支持的相互翻译。当 AI 不再只是“逐字直译”，而是开始理解语境、风格与语言之间的细微差异，机器翻译就真正具备了今天为大家介绍一款高质量、多语言、支持端侧部署的机器翻译模型 ——，现已上线 AtomGit AI 社区，

avatar AtomGit开源社区
cover

LET：面向真实场景与长时序任务的人形机器人数据集

avatar AtomGit开源社区
cover

寒假充电计划启动！解锁 Flutter-OH 新技能 | 21 天训练营招募中

avatar AtomGit开源社区