What is the proper way to invoke render functions using Vue 3 composition API?

Question

What is the proper way to invoke render functions using Vue 3 composition API?

During my time with Vue 2, I would typically call render() in this manner:

export default {
    mounted(){
        ...
    },
    render(){
        ...
    },
    methods(){
        ...
    }
}

Now that I'm exploring Vue 3 and the composition API, I attempted to replicate the same approach. Here's what I experimented with:

export default {
    ...
    setup(props, context){
        ...
        const create_canvas = (h, id, props) => {
            _id.value = id
            _attrs.value = props.attrs
            return () => h('div', {
                class: `trading-vue-${id}`,
                style: {
                    left: props.position.x + 'px',
                    top: props.position.y + 'px',
                    position: 'absolute',
                }
            }, [
                h('canvas', Object.assign({
                    id: `${props.tv_id}-${id}-canvas`,
                    onmousemove: e => renderer.mousemove(e),
                    onmouseout: e => renderer.mouseout(e),
                    onmouseup: e => renderer.mouseup(e),
                    onmousedown: e => renderer.mousedown(e),
                    ref: 'canvas',
                    style: props.style,
                }, props.attrs))
            ].concat(props.hs || []))
        };

        function render() {
            const id = props.grid_id
            const layout = props.layout.grids[id]
            return () => create_canvas(h, `grid-${id}`, {
                position: {
                    x: 0,
                    y: layout.offset || 0
                },
                attrs: {
                    width: layout.width,
                    height: layout.height,
                    overflow: 'hidden'
                },
                style: {
                    backgroundColor: props.colors.back
                },
                hs: [
                    h(Crosshair, Object.assign(
                        common_props(),
                        layer_events
                    )),
                    h(KeyboardListener, keyboard_events),
                    h(UxLayer, {
                        id,
                        tv_id: props.tv_id,
                        uxs: uxs.value,
                        colors: props.colors,
                        config: props.config,
                        updater: Math.random(),
                        onCustomEvent: emit_ux_event
                    })
                ].concat(get_overlays(h))
            })
        };

        render()
    }
}

However, it seems like this code doesn't display anything in my template. I suspect that I might not be utilizing the render function correctly. Can someone assist me in understanding how to properly employ it?

javascript vue.js

Answer 1

Answer №1

Based on my understanding, the function h() is a concise way to generate vnodes and requires 3 parameters.

h(
    tag name,
    props/attributes,
    array of children
)

From what I gather, within the create_canvas function, you are attempting to create a div element with specified class and inline styles as attributes/props, and then adding a canvas element as a child to this div vnode. Therefore, instead of directly returning the vNode from setup(), it would be more appropriate to return a render function that in turn returns a vNode.

export default {
    props: {
      // props will be added here 
    },
    setup(props) {
        // render() { h(...) } ❌
           return () => {
               h('div', {
                class: `trading-vue-${id}`,
                style: {
                    left: props.position.x + 'px',
                    top: props.position.y + 'px',
                    position: 'absolute',
                }
            }, [
                h('canvas', Object.assign({
                    id: `${props.tv_id}-${id}-canvas`,
                    onmousemove: e => renderer.mousemove(e),
                    onmouseout: e => renderer.mouseout(e),
                    onmouseup: e => renderer.mouseup(e),
                    onmousedown: e => renderer.mousedown(e),
                    ref: 'canvas',
                    style: props.style,
                }, props.attrs))
            ].concat(props.hs || []))
       } ✅
    }
}

Answer 2

Based on my understanding, the function h() is a concise way to generate vnodes and requires 3 parameters.

h(
    tag name,
    props/attributes,
    array of children
)

From what I gather, within the create_canvas function, you are attempting to create a div element with specified class and inline styles as attributes/props, and then adding a canvas element as a child to this div vnode. Therefore, instead of directly returning the vNode from setup(), it would be more appropriate to return a render function that in turn returns a vNode.

export default {
    props: {
      // props will be added here 
    },
    setup(props) {
        // render() { h(...) } ❌
           return () => {
               h('div', {
                class: `trading-vue-${id}`,
                style: {
                    left: props.position.x + 'px',
                    top: props.position.y + 'px',
                    position: 'absolute',
                }
            }, [
                h('canvas', Object.assign({
                    id: `${props.tv_id}-${id}-canvas`,
                    onmousemove: e => renderer.mousemove(e),
                    onmouseout: e => renderer.mouseout(e),
                    onmouseup: e => renderer.mouseup(e),
                    onmousedown: e => renderer.mousedown(e),
                    ref: 'canvas',
                    style: props.style,
                }, props.attrs))
            ].concat(props.hs || []))
       } ✅
    }
}

Answer 3

Answer №2

Instead of explicitly calling the render function, you simply declare it in Vue (and Vue will call it during rendering).

With the Composition API, all you need to do is return the render function from the setup method.

import { ref, h } from 'vue'

export default {
  props: {
    /* ... */
  },
  setup(props) {
    const count = ref(1)

    // return the render function
    return () => h('div', props.msg + count.value)
  }
}

When applying this concept to your own code, remember that the last line of the setup should be a return render() instead of just render() because the actual "render" function is returned by the render() function itself.

In JavaScript, functions can be treated as data - you can store and return them. The function is not immediately executed when stored or returned within another function, but rather created for later use. The caller of the "factory" function (in this case, the Vue framework) can save the reference to the returned function and decide when to execute it.

The Vue Composition API onMounted hook operates in a similar way. You pass a newly created function to onMounted(), which then stores the reference for Vue to call at a later point.

It's important to understand that the order of execution inside the setup() method does not matter since Vue controls when to call these functions. Vue will likely ensure that the render function is called at least once before any functions passed into onMounted() are executed (as the component must be rendered before being mounted).

Answer 4

Instead of explicitly calling the render function, you simply declare it in Vue (and Vue will call it during rendering).

With the Composition API, all you need to do is return the render function from the setup method.

import { ref, h } from 'vue'

export default {
  props: {
    /* ... */
  },
  setup(props) {
    const count = ref(1)

    // return the render function
    return () => h('div', props.msg + count.value)
  }
}

When applying this concept to your own code, remember that the last line of the setup should be a return render() instead of just render() because the actual "render" function is returned by the render() function itself.

In JavaScript, functions can be treated as data - you can store and return them. The function is not immediately executed when stored or returned within another function, but rather created for later use. The caller of the "factory" function (in this case, the Vue framework) can save the reference to the returned function and decide when to execute it.

The Vue Composition API onMounted hook operates in a similar way. You pass a newly created function to onMounted(), which then stores the reference for Vue to call at a later point.

It's important to understand that the order of execution inside the setup() method does not matter since Vue controls when to call these functions. Vue will likely ensure that the render function is called at least once before any functions passed into onMounted() are executed (as the component must be rendered before being mounted).

What is the proper way to invoke render functions using Vue 3 composition API?

Answer №1

Answer №2

Similar questions

What is the significance of "new" being omitted in the upcoming jQuery script?

Developing a digital sound system using JavaScript

Is it possible to use JavaScript to toggle mute and unmute functions on an iPad?

Encountering an issue when trying to activate Vue UI: spawn cmd ENOENT error

Updating the state of an object nested within another object in React JS

React/MaterialUI - Is there a way to customize the placeholder text for my multi-input field beyond the provided options?

Including a label for an array within an unnamed array in a JSON string

Determine the date and time based on the number of days passed

Concealing items in a loop using Javascript

Toggle the visibility of table rows using checkboxes

What is the best way to recover accented characters in Express?

bespoke HTML elements and properties

Display the table once the radio button has been selected

How to apply props conditionally in VueJS?

What could be causing me to receive null when trying to retrieve an element with document.getElementById, even after invoking $(document).ready(function() { ... })?

Experience seamless one-to-many broadcasting with WebRTC/Kurento, featuring server-side recording capabilities

Is there a way for me to modify this carousel so that it only stops when a user hovers over one of the boxes?

Implementing an onclick function to initiate a MySQL update query

Create a graphical representation of network topology using VueJS

The Ejs page is failing to render on the simplified code version