Options API render

Vue SFC JSX

<script lang="jsx">
export default {
  name: 'OptionsRenderJsx',
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count += 1
    }
  },
  render() {
    return (
      <article class="demo-card">
        <span class="case-label">Options API / JSX</span>
        <h3>script lang="jsx"</h3>
        <p>render() 自动注入 h，并使用 Vue 2 VNodeData 事件结构。</p>
        <button class="button" onClick={this.increment}>JSX 计数：{this.count}</button>
      </article>
    )
  }
}
</script>

Vue SFC TSX

<script lang="tsx">
type DemoState = { count: number; message: string }

export default {
  name: 'OptionsRenderTsx',
  data(): DemoState {
    return { count: 1, message: 'TypeScript 类型会保留给 Vite Oxc 处理' }
  },
  render(this: any) {
    const doubled: number = this.count * 2
    return (
      <article class="demo-card">
        <span class="case-label">Options API / TSX</span>
        <h3>script lang="tsx"</h3>
        <p>{this.message}</p>
        <button class="button" onClick={() => { this.count += 1 }}>
          {this.count} × 2 = {doubled}
        </button>
      </article>
    )
  }
}
</script>

没有显式 render(h) 参数时，插件会根据环境自动注入 h；TSX 类型保留给 Vite Oxc 的后续阶段。