選項1：使用createVNode(component, props)和render(vnode, container)

建立：使用createVNode()建立一個帶有props的元件定義的VNode（例如，從*.vue導入的SFC），可以將其傳遞給render()在給定的容器元素上渲染。

銷毀：呼叫render(null, container)會銷毀附加到容器的VNode。當父元件卸載時（透過unmounted生命週期鉤子）應該呼叫此方法進行清理。

// renderComponent.js import { createVNode, render } from 'vue' export default function renderComponent({ el, component, props, appContext }) { let vnode = createVNode(component, props) vnode.appContext = { ...appContext } render(vnode, el) return () => { // destroy vnode render(null, el) vnode = undefined } }

注意：此方法依賴內部方法（createVNode和render），這些方法在未來的版本中可能會進行重構或刪除。

示範1

選項2：使用createApp(component, props)和app.mount(container)

#建立：使用createApp()建立一個應用程式實例。此實例具有mount()方法，可用於在給定的容器元素上渲染元件。

銷毀：應用實例具有unmount()方法來銷毀應用程式和元件實例。當父元件卸載時（透過unmounted生命週期鉤子）應該呼叫此方法進行清理。

// renderComponent.js import { createApp } from 'vue' export default function renderComponent({ el, component, props, appContext }) { let app = createApp(component, props) Object.assign(app._context, appContext) // 必须使用Object.assign在_context上 app.mount(el) return () => { // 销毁app/component app?.unmount() app = undefined } }

注意：此方法為每個元件建立一個應用實例，如果需要在文件中同時實例化多個元件，可能會產生不小的開銷。

示範2

範例用法