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

Fixing the hydration error in Next 13 can be challenging, especially when it occurs outside of a Suspense boundary

Set up a mouseover function for a <datalist> tag

Ways to eliminate reliance on jQuery

Make sure to leave a space after a period in a sentence, but do

Utilize JQuery to implement fading effects for clicked elements in a webpage

Retrieve an image file from Laravel API within Vue Cli 3

Filter and search JSON data using React Native

Struggling to retrieve data from AJAX POST request [Revised Post]

Unable to send multiple cookies using custom headers in Next.js configuration

I'm running into an InvalidSelectorError and I could use some assistance in properly defining

The functionality of removing a class on the body element is ineffective when using pagepiling.js

What is the best way to personalize the collector for each individual?

Establish a predetermined selection for a radio button and its associated checkbox option

Tips for reorganizing the JSON data created by Artoo.js?

Error: jwt_decode function has not been declared

Switch body class when the navbar's collapse show class is toggled

Getting the date from a datetime JSON - here's how!

Struggling to retrieve the 'this' object using a dynamic string

Is there a way to determine the color of an element when it is in a hover state?

React Functional Component fails to update on state changes