Forem: Sharvilak

Vue 3: Optimization via Cached Handlers

Sharvilak — Fri, 03 Jul 2020 17:54:08 +0000

As Vue's upcoming major release is getting nearer (scheduled in August), let's take a look at one of its most interesting optimizations done in the Compiler & Renderer API - Caching of Handlers 💡

If you are familiar with React's useCallback() hook, you can compare this feature exactly to what it does, but without any need of explicitly specifying useCallback!

AST Output without caching handlers

Let's first understand how it would have generated the AST with treating the event handler as a normal Prop and without caching, with below example.

<button type="button" id="btnIncrement" @click="increment">
   Increment
</button>

Look at the above code within template. Let's analyse how it would be compiled into its AST.

export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("button", {
    type: "button",
    id: "btnIncrement",
    onClick: _ctx.increment
  }, "Increment", 8 /* PROPS */, ["onClick"]))
}

Let's understand what's going on here 👀

Here type and id are hardcoded or static. So, Vue doesn't need to add them to the patch-flag array.

However onClick has been bound to a reference of the handler, so in AST it gets added to the patch-flag array to be checked for any changes. So every time this node is diffed or patched, Vue will check if there are any changes in onClick and re-render if any. But in most cases you never really intend to change the event listener, isn't it? 🤔

How Vue 3 caches the handlers

To overcome this problem, Vue 3 compiler has a mechanism which caches the handlers on first render and stores it as an inline function and on any subsequent render, it takes it directly from cache. Let's take a look at the AST with cache handler.

export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("button", {
    type: "button",
    id: "btnIncrement",
    onClick: _cache[1] || (
     _cache[1] = ($event, ...args) => (_ctx.increment($event, ...args))
    )
  }, "Increment"))
}

First, it calls the _ctx.increment in an inline function which is stored within the cache and then on every subsequent render, it would use the value from _cache[1]. Also, _ctx.increment will always refer to the latest version of increment().

Now onClick isn't required to be put into the patch-flag array. This reduces the overhead of checking the whole node for any changes and saves a lot of re-rendering since type and id are static and onClick is cached. You can imagine, how much re-rendering it can prevent from cascading in the case of a big component tree 🎉 🚀

Comparison with useCallback() of React

React 16.8.0 introduced hooks and one of them useCallback allowed developers to memoize the functions or methods explicitly by passing them to useCallback() and avoid re-initialising the same methods during any subsequent render.

const increment = useCallback(() => {
   // ... do something
});

Vue 3.0 follows a similar pattern but without the need of explicitly specifying useCallback and does it under the hood.

onClick: _cache[1] || (
   _cache[1] = ($event, ...args) => (_ctx.increment($event, ...args)
)

That's a wrap ! 🎬

Feel free to discuss in comments anything related to Vue, I will be more than happy to join and take your suggestions/improvements ✌️ You can also connect with me on Twitter in case you would like to discuss anything on Vue 💚 or Node ✅ or React 💙

Rendering a nested array of unknown depth recursively in Vue !

Sharvilak — Sun, 19 Apr 2020 11:43:18 +0000

This is a post I've made for Vue developers on how to render your elements especially when you are unsure on how many total iterations or levels exist within an array (in simple words: when depth of nested array is unknown).

How do we handle nested iteration ?

First thing which comes to everyone's mind...Recursion! But how do we implement recursion in Vue templates ?

Let's take an example to iterate over the list of replies a comment has received, in a recursive linked list fashion.

Using <template> syntax, we can achieve recursion by using the same component again within the component.

After compilation, under the hood Vue will recursively call Comment component's render function until the base case is met (when no replies any more) and compile the whole tree to build VNodes.

Let's analyse a general schema of any post. Also for simplicity let's assume that a comment and a reply have the same structure.

{
    "Author": "John Doe",
    "Id": 1,
    "Title": "This is our first post",
    "Body": "Lorem Ipsum is simply dummy text of the printing and typesetting industry...",
    "Comments": [
        {
           "UserId": "7",
           "Body": "Great post! Loved it! 💜",
           "Comments": [
             {
                "UserId": "13",
                "Body": "Really appreciate that! Thank you 😃",
                "Comments": [
                   {
                      ... // more nested replies in the form of comments
                   } 
                ]
             }   
           ]
        },
        {
           "UserId": "21",
           "Body": "Awesome! 👏 Could you please share the details about this ?",
           "Comments": [
             {
                "UserId": "13",
                "Body": "Thanks Max. I have sent a DM to you.",
                "Comments": [
                   {
                      ... // more nested replies in the form of comments
                   } 
                ]
             }   
           ]
        },
        {
           ... // more comments with replies and so on
        }
   ]
}

Programming Part

Let's begin with how our components should be.

We will need mainly two components.

Post : This component will be responsible for displaying all information in a post.
Comment : This component will be responsible for displaying all information in a comment. We have to implement our logic of rendering the replies in a recursive way.

And yes App.vue of course!

Let's code 💻

Post.vue

<template>
    <div>
        <div class="post">
            <div class="d-flex align-items-center">
                <Avatar size="40" :text="post.Author" class="mr-3"></Avatar>
                <h4>{{ post.Title }}</h4>
            </div>
            <div class="post-summary">
                <div class="d-flex align-items-center pb-2 mb-2">
                    <i class="material-icons mr-1">thumb_up_alt</i> {{ post.Likes }}
                    <i class="material-icons ml-2 mr-1">comment</i> {{ post.Comments ? post.Comments.length : 0 }}
                </div>
                <a v-if="post.Comments" @click="$set(post,'expanded', true)" class="mt-2" :class="{'d-none': post.expanded}">
                    View Comments:
                </a>
                <div v-if="post.expanded">
                    <Comment v-for="(c, key) in post.Comments" :comment="c" :key="key"></Comment>
                </div>
            </div>
        </div>
    </div>
</template>

This will display all information of the post related to Title, Author, Likes and any direct comments received on the post.

Comment.vue

<template>
    <div class="comment">
        <div class="d-flex align-items-center">
            <Avatar :text="comment.User" size="30"></Avatar>
            <div class="ml-2">
                <strong>{{ comment.User }}</strong>
                <p>{{ comment.Body }}</p>
            </div>
        </div>
        <a class="d-flex align-items-center text-muted ml-1" @click="$set(comment, 'expanded', true)"
            v-if="comment.Comments && !comment.expanded">
            <i class="material-icons">subdirectory_arrow_right</i> {{ comment.Comments.length }} replies:
        </a>
        <div v-if="comment.Comments && comment.expanded">
            <Comment v-for="(c, key) in comment.Comments" :comment="c" :key="key"></Comment>
        </div>
    </div>
</template>

This component will display the details about the current comment and render its children (any further replies) if any and this will go on till there are no more children.

This is how recursion works in Vue templates! Simple, isn't it ? 💁

Demistifying what each component did after compilation 👀

Post.vue

Vue will create virtual nodes for Post component and loop through the direct comments (first level) in the post with Comment component.

render(h) {
    return h('div', [
        h('div', { class: 'post' },
            [
                h('div', { class: 'd-flex align-items-center' },
                    [
                        h(Avatar, {
                            props: {
                                size: '40',
                                text: this.post.Author,
                            },
                            class: 'mr-3',
                        }), h('h4', this.post.Title)
                    ]
                ),
                h('div', { class: 'post-summary'},
                    [
                        h('div', { class: 'd-flex align-items-center pb-2 mb-2'},
                            [
                                h('i', { class: 'material-icons mr-1' }, 'thumb_up_alt'),
                                this.post.Likes,
                                h('i', { class: 'material-icons ml-2 mr-1' }, 'comment'),
                                this.post.Comments ? this.post.Comments.length : 0]
                        ),
                        this.post.Comments ? [
                            h('a', {
                                on: {
                                    click: () => {
                                        this.$set(this.post,'expanded', true);
                                    }
                                },
                                class: ['mt-2', {
                                    'd-none': this.post.expanded,
                                }],
                            }, 'View Comments:'),
                            this.post.expanded ? (h('div', {
                                class: 'mt-2'
                            }, [
                                this.post.Comments.map(comment => h(Comment, {
                                    props: {
                                        comment
                                    }
                                })
                                )
                            ])): null
                        ]: null
                    ]
                )
            ]
        )
    ]);
}

Comment.vue

If a comment has further more comments (in terms of replies), it loops through the same with Comment component by iterating over comment.Comments.

render(h) {
    return h('div',{ class: 'comment' }, 
        [
            h('div', { class: 'd-flex align-items-center' }, 
                [
                    h(Avatar, {
                        props: {
                            text: this.comment.User,
                            size: '30'
                        }
                    }),
                    h('div', { class: 'ml-2' }, 
                        [ 
                            h('strong', this.comment.User), 
                            h('p', this.comment.Body)
                        ]
                    )
                ]),
            this.comment.Comments && !this.comment.expanded ? 
                h('a', { 
                    class: 'd-flex align-items-center text-muted ml-1',
                    on: {
                        click: () => {
                            this.$set(this.comment, 'expanded', true);
                        }
                    }
                }, 
                [
                    h('i', { class: 'material-icons' }, 'subdirectory_arrow_right'),
                    this.comment.Comments.length + ' replies'
                ]
                ) : null,
            this.comment.Comments && this.comment.expanded ? 
            this.comment.Comments.map((c, key) => {
                return h(Comment, {
                    key,
                    props: {
                        comment: c
                    },
                });
            }): null
        ]
    );
}

That's a wrap ! 🎬

Conclusion

Recursion is easy. Using the same component with different props within the component is the way to achieve recursion in Vue.

I have created a GitHub repository for the same. Code prior to compilation is written as comments in <template> tag and compiled code is written in simple JS under render() hook.

In case you need any sort of help in Vue, you can always reach out to me via GitHub or just say Hi on Twitter. I will be happy to help 😀