当前位置：首页 > news >正文

Vue3 自定义渲染器 API createRenderer()（七）

news 2025/6/24 14:29:56

createRenderer()

createRenderer() 是一个高级 API，它允许你创建自定义的渲染器。这个 API 主要是为了支持 Vue 的非 DOM 渲染目标，如 WebGL、Canvas、Web Workers、自定义 DOM 实现等。
在实际使用中，自定义渲染器是一个复杂的任务，需要对 Vue 的内部工作原理有深入的了解。通常，你不需要直接使用 createRenderer()，除非你正在开发一个特定的平台或库，需要非 DOM 的渲染支持。在大多数情况下，你可以直接使用 Vue 提供的默认 DOM 渲染器。

createRenderer() 函数接受两个参数：nodeOps 和 patchProp。

nodeOps： 这是一个对象，其中定义了一组与节点（Node）相关的操作。这些操作通常与特定的渲染目标相对应，例如在 DOM 渲染中，这些操作会处理 DOM 节点的插入、删除、更新等。在自定义渲染器中，你需要根据目标平台定义这些操作。
patchProp：
这是一个函数，用于处理属性的更新。当 Vue 检测到组件的属性（props）或 DOM 元素的属性发生变化时，这个函数会被调用。你需要在这个函数中定义如何根据新的属性值更新渲染目标。

createRenderer() 返回一个对象，该对象包含以下方法和属性：

1. renderToString(node, context)：
将给定的 Vue 节点（通常是一个 Vue 组件的实例）渲染为字符串。这在服务器端渲染（SSR）中特别有用。context 是一个可选的参数，用于传递额外的上下文信息。
2. renderToStream(node, context)：
将给定的 Vue 节点渲染为一个可读流（Readable Stream）。这同样在 SSR 中有用，特别是在处理大型应用程序时，可以使用流来更有效地处理输出。
3. createApp(rootComponent, rootProps = null, hydrate = false)：
创建一个新的 Vue 应用程序实例。
rootComponent 是根组件的选项对象或构造函数。
rootProps 是传递给根组件的属性（props）。
hydrate 是一个布尔值，表示是否要尝试与服务端渲染（SSR）的输出进行“水合”（hydrate）。

import { createRenderer } from '@vue/runtime-core'const { render, createApp } = createRenderer({patchProp,insert,remove,createElement// ...
})// `render` 是底层 API
// `createApp` 返回一个应用实例
export { render, createApp }// 重新导出 Vue 的核心 API
export * from '@vue/runtime-core'
Vue 自身的 @vue/runtime-dom 也是利用这套 API 实现的。

const { createRenderer } = require('vue')  const { renderToString } = createRenderer({  // 自定义 nodeOps 和 patchProp  // ...  
})  const app = createApp({  // Vue 组件定义  // ...  
})  // 渲染 Vue 应用为字符串  
const html = renderToString(app.mount('#app'))  
console.log(html)