render-function-api

16 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

withDirectives() example

Example of withDirectives(): ```js import { h, withDirectives } from 'vue' // a custom directive const pin = { mounted() { /* ... */ }, updated() { /* ... */ } } // <div v-pin:top.animate="200"></div> const vnode = withDirectives(h('div'), [ [pin, 200, 'top', { animate: true }] ]) ```

h() render function signature

The h() function creates virtual DOM nodes (vnodes). It has multiple overload signatures: Full signature: function h( type: string | Component, props?: object | null, children?: Children | Slot | Slots ): VNode Signature omitting props: function h(type: string | Component, children?: Children | Slot): VNode Where: type Children = string | number | boolean | VNode | null | Children[] type Slot = () => Children type Slots = { [name: string]: Slot } The first argument can be a string (for native elements) or a Vue component definition. The second argument is props to be passed, and the third argument is children. When creating a component vnode, children must be passed as slot functions. Props argument can be omitted when children is not a slots object.

h() native element creation examples

Creating native elements with h(): ```js import { h } from 'vue' // all arguments except the type are optional h('div') h('div', { id: 'foo' }) // both attributes and properties can be used in props h('div', { class: 'bar', innerHTML: 'hello' }) // class and style have the same object / array value support like in templates h('div', { class: [foo, { bar }], style: { color: 'red' } }) // event listeners should be passed as onXxx h('div', { onClick: () => {} }) // children can be a string h('div', { id: 'foo' }, 'hello') // props can be omitted when there are no props h('div', 'hello') h('div', [h('span', 'hello')]) // children array can contain mixed vnodes and strings h('div', ['hello', h('span', 'hello')]) ```

h() component creation examples

Creating components with h(): ```js import Foo from './Foo.vue' // passing props h(Foo, { // equivalent of some-prop="hello" someProp: 'hello', // equivalent of @update="() => {}" onUpdate: () => {} }) // passing single default slot h(Foo, () => 'default slot') // passing named slots // notice the `null` is required to avoid // slots object being treated as props h(MyComponent, null, { default: () => 'default slot', foo: () => h('div', 'foo'), bar: () => [h('span', 'one'), h('span', 'two')] }) ```

mergeProps() function signature and behavior

The mergeProps() function merges multiple props objects with special handling for certain props. Signature: function mergeProps(...args: object[]): object It supports merging multiple props objects with special handling for: - class - style - onXxx event listeners - multiple listeners with the same name will be merged into an array. If you do not need the merge behavior and want simple overwrites, native object spread can be used instead.

mergeProps() example

Example of mergeProps() behavior: ```js import { mergeProps } from 'vue' const one = { class: 'foo', onClick: handlerA } const two = { class: { bar: true }, onClick: handlerB } const merged = mergeProps(one, two) // Results in: // { // class: 'foo bar', // onClick: [handlerA, handlerB] // } ```

cloneVNode() function signature

The cloneVNode() function clones a vnode. Signature: function cloneVNode(vnode: VNode, extraProps?: object): VNode It returns a cloned vnode, optionally with extra props to merge with the original. Vnodes should be considered immutable once created, and you should not mutate the props of an existing vnode. Instead, clone it with different or extra props. Vnodes have special internal properties, so cloning them is not as simple as object spread. cloneVNode() handles most of the internal logic.

cloneVNode() example

Example of cloneVNode(): ```js import { h, cloneVNode } from 'vue' const original = h('div') const cloned = cloneVNode(original, { id: 'foo' }) ```

isVNode() function signature

The isVNode() function checks if a value is a vnode. Signature: function isVNode(value: unknown): boolean

resolveComponent() function signature

The resolveComponent() function manually resolves a registered component by name. Signature: function resolveComponent(name: string): Component | string Note: you do not need this if you can import the component directly. resolveComponent() must be called inside either setup() or the render function in order to resolve from the correct component context. If the component is not found, a runtime warning will be emitted, and the name string is returned.

resolveComponent() example with setup

Example of resolveComponent() in setup(): ```js import { h, resolveComponent } from 'vue' export default { setup() { const ButtonCounter = resolveComponent('ButtonCounter') return () => { return h(ButtonCounter) } } } ```

resolveComponent() example with render function

Example of resolveComponent() in render function (Options API): ```js import { h, resolveComponent } from 'vue' export default { render() { const ButtonCounter = resolveComponent('ButtonCounter') return h(ButtonCounter) } } ```

resolveDirective() function signature

The resolveDirective() function manually resolves a registered directive by name. Signature: function resolveDirective(name: string): Directive | undefined Note: you do not need this if you can import the directive directly. resolveDirective() must be called inside either setup() or the render function in order to resolve from the correct component context. If the directive is not found, a runtime warning will be emitted, and the function returns undefined.

withDirectives() function signature

The withDirectives() function adds custom directives to vnodes. Signature: function withDirectives( vnode: VNode, directives: DirectiveArguments ): VNode Where: type DirectiveArguments = Array< | [Directive] | [Directive, any] | [Directive, any, string] | [Directive, any, string, DirectiveModifiers] > The second argument is an array of custom directives. Each custom directive is represented as an array in the form of [Directive, value, argument, modifiers]. Trailing elements of the array can be omitted if not needed.

withModifiers() function signature

The withModifiers() function adds built-in v-on modifiers to an event handler function. Signature: function withModifiers(fn: Function, modifiers: ModifierGuardsKeys[]): Function

withModifiers() example

Example of withModifiers(): ```js import { h, withModifiers } from 'vue' const vnode = h('button', { // equivalent of v-on:click.stop.prevent onClick: withModifiers(() => { // ... }, ['stop', 'prevent']) }) ```

Give your agent this brain