render function definition
A render function is the part of a component that generates the VNodes used during rendering. Templates are compiled down into render functions.
render
13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
createRenderer function signature and types
createRenderer is a function that takes RendererOptions<HostNode, HostElement> and returns a Renderer<HostElement>. The function signature is: function createRenderer<HostNode, HostElement>(options: RendererOptions<HostNode, HostElement>): Renderer<HostElement>. The Renderer interface has two properties: render (type RootRenderFunction<HostElement>) and createApp (type CreateAppFunction<HostElement>).
RendererOptions interface - patchProp
RendererOptions includes a patchProp method with signature: patchProp(el: HostElement, key: string, prevValue: any, nextValue: any, namespace?: ElementNamespace, parentComponent?: ComponentInternalInstance | null): void. This method handles patching properties on elements.
RendererOptions interface - node insertion and removal
RendererOptions includes insert and remove methods. insert has signature: insert(el: HostNode, parent: HostElement, anchor?: HostNode | null): void. remove has signature: remove(el: HostNode): void.
RendererOptions interface - element creation
RendererOptions includes createElement with signature: createElement(type: string, namespace?: ElementNamespace, isCustomizedBuiltIn?: string, vnodeProps?: (VNodeProps & { [key: string]: any }) | null): HostElement. This creates a host element of the specified type.
RendererOptions interface - text node operations
RendererOptions includes createText, createComment, setText, and setElementText methods. createText(text: string): HostNode creates a text node. createComment(text: string): HostNode creates a comment node. setText(node: HostNode, text: string): void sets text content on a node. setElementText(node: HostElement, text: string): void sets text content on an element.
RendererOptions interface - node traversal
RendererOptions includes parentNode and nextSibling methods for node traversal. parentNode(node: HostNode): HostElement | null returns the parent node. nextSibling(node: HostNode): HostNode | null returns the next sibling node.
RendererOptions interface - optional methods
RendererOptions includes optional methods: querySelector?(selector: string): HostElement | null for querying elements, setScopeId?(el: HostElement, id: string): void for setting scoped CSS IDs, cloneNode?(node: HostNode): HostNode for cloning nodes, and insertStaticContent?(content: string, parent: HostElement, anchor: HostNode | null, namespace: ElementNamespace, start?: HostNode | null, end?: HostNode | null): [HostNode, HostNode] for inserting static content.
createRenderer usage example
A custom renderer is created by calling createRenderer with an options object containing implementations of platform-specific APIs like patchProp, insert, remove, and createElement. The result is destructured to get render and createApp, which can then be exported along with re-exports from '@vue/runtime-core'.
Custom renderer purpose
createRenderer enables targeting non-DOM environments by allowing developers to provide platform-specific node creation and manipulation APIs. This leverages Vue's core runtime for custom rendering platforms beyond the DOM.
Vue runtime-dom implementation
Vue's @vue/runtime-dom package is implemented using the same createRenderer API. The @vue/runtime-test package is a simpler implementation used for Vue's own unit testing.
setup() with render function return
setup can return a render function which can directly make use of the reactive state declared in the same scope. When returning a render function, you cannot return anything else.
setup() example returning render function
Example showing setup returning a render function: import { h, ref } from 'vue'; export default { setup() { const count = ref(0); return () => h('div', count.value); } };