互操作性

vue-jsx-vapor 支持 Virtual DOM 和 Vapor DOM 混合使用。将 interop 设置为 true 后， 在 defineVaporComponent 中定义的 JSX 会被编译为 Vapor DOM,
在 defineVaporComponent 外定义的 JSX 会被编译为 Virtual DOM。

在 Virtual DOM 中使用 Vapor

演练场

vite.config.ts

import { defineConfig } from 'vite'
import vueJsxVapor from 'vue-jsx-vapor/vite'

export default defineConfig({
  plugins: [
    vueJsxVapor({
      macros: true,
      interop: true,
    }),
  ],
})

main.ts

import { createApp, vaporInteropPlugin } from 'vue'
import App from './App.tsx'
createApp(App).use(vaporInteropPlugin).mount('#app')

App.tsx

import {
  ,
  ,
  ,
  ,
} from 'vue'
import {  } from 'vue-jsx-vapor'

const  = (({  = 0 }) => {
  ({
    : (() =>  * 2),
  })
  return <> x 2 = </>
})

export default (() => {
  const  = (1)
  const  = ()
  return () => (
    <>
      < ={.} />
      < ={.} ={}></>
      {.?.}
    </>
  )
})

在 Vapor 中使用 Virtual DOM

演练场

vite.config.ts

import { defineConfig } from 'vite'
import vueJsxVapor from 'vue-jsx-vapor/vite'

export default defineConfig({
  plugins: [
    vueJsxVapor({
      macros: true,
      interop: true,
    }),
  ],
})

main.ts

import { createVaporApp, vaporInteropPlugin } from 'vue'
import App from './App.tsx'
createVaporApp(App).use(vaporInteropPlugin).mount('#app')

App.tsx

import {
  ,
  ,
  ,
  ,
} from 'vue'
import {  } from 'vue-jsx-vapor'

const  = (({  = 0 }) => {
  ({
    : (() =>  * 2),
  })
  return <> x 2 = </>
})

export default (() => {
  const  = (1)
  const  = ()
  return () => (
    <>
      < ={.}/>
      < ={.} ={}></>
      {.?.}
    </>
  )
})