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

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)