vue3中的return,h,render

一、return 的作用

1. 在 setup 函数中

• 作用：setup 函数的返回值决定了模板中可用的数据和方法。setup 只能返回对象或函数，不能混合返回。
• 规则：返回的对象中的属性和方法会暴露给模板使用。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    // 返回的对象会暴露给模板
    return {
      count,
      increment
    };
  }
}

关键点‌：

• 若返回对象，模板可直接使用其属性和方法。
• 若返回‌函数‌，则该函数会被用作 render 函数（替代模板）。

二、h 函数（createVNode 的别名）

1. 什么是 h？

h 是 Vue 3 中 createVNode 的别名（h 是 "hyperscript" 的缩写），用于创建 虚拟节点（VNode）。

常用于以下场景：

‌手写渲染函数‌

‌JSX/TSX 编译后的代码‌

‌动态生成复杂 UI

它是构建渲染函数的核心函数。

2. h 的参数结构

h(
  tag,        // 标签名（字符串、组件、函数）
  props,      // 属性对象（包含 class、style、事件等）
  children    // 子节点（字符串、数组、其他 VNode）
)

在 JSX 中，<div>...</div> 会自动编译为 h('div', {}, ...)。

import { h } from 'vue';

export default {
  setup() {
    return () => h('div', { class: 'container' }, [
      h('h1', 'Hello Vue3'),
      h('button', { onClick: () => alert('Clicked!') }, 'Click Me')
    ]);
  }
}

 ‌3. render 函数‌

render 函数是 Vue 的核心 API，用于定义组件的渲染逻辑。它返回一个由 h 创建的 VNode，Vue 会将其转换为真实 DOM。
在两种场景中使用：

‌场景 1：直接定义 render 选项 

export default {
  render() {
    return h('div', 'This is rendered by render()');
  }
}

render(vnode, container) {
  const node = createVNode(Button, { type: 'primary' })
  render(node, document.getElementById('app'))
}

 ‌场景 2：在 setup 中返回渲染函数

import { h } from 'vue';

export default {
  setup() {
    // 返回一个函数时，Vue 会将其视为 render 函数
    return () => h('div', 'Dynamic content from setup()');
  }
}

‌关键点‌：

• 若 setup 返回一个函数，该函数会替代 render 选项。
• 此时模板（<template>）会被忽略。