Vue Component Event After Render: In-depth Analysis of the updated Lifecycle Hook

In Vue.js development, it is often necessary to perform certain operations after component rendering completes, such as initializing third-party libraries or executing DOM-related jQuery functions. A common question arises: when data updates cause template re-rendering, how can we ensure that subsequent operations are triggered only after the DOM is fully updated? This article will delve into Vue's updated lifecycle hook through a specific case study and provide a complete solution.

Problem Background and Case Analysis

Consider the following Vue component scenario: the component fetches blog post data via AJAX, and after data updates, code blocks need to be highlighted. The developer initially attempted to use watch to monitor changes in the blogPost data:

watch: {
    blogPost: function () {
        console.log(this.blogPost);
        jQuery("pre").each((i, e) => {
            hljs.highlightBlock(e);
        });
    }
}

However, it was found that when watch triggers, the DOM has not yet been updated, causing jQuery operations to fail to apply correctly to newly rendered elements. This is because Vue's reactive system, after data changes, needs to go through the virtual DOM re-rendering and patching process, while watch executes immediately after data changes without waiting for DOM updates to complete.

Working Mechanism of the updated Lifecycle Hook

updated is a key hook in Vue's lifecycle, called after data changes cause virtual DOM re-rendering and patching to complete. At this point, the component's DOM has been updated, making it suitable for performing DOM-dependent operations. Here is its working mechanism:

1. Data changes trigger the reactive system update
2. Vue recalculates the virtual DOM
3. Patches virtual DOM differences to the actual DOM
4. Calls the updated hook

In Vue2, it can be defined via the Options API:

export default {
    updated() {
        // DOM is updated, safe to execute jQuery operations
        jQuery("pre").each((i, e) => {
            hljs.highlightBlock(e);
        });
    }
}

Implementation Comparison Between Vue2 and Vue3

In Vue2, updated is used directly as part of the Options API. In Vue3, the implementation differs based on the API style used:

Vue3 Options API

Similar to Vue2, but note the differences with the Composition API:

export default {
    updated() {
        console.log('Component updated');
    }
}

Vue3 Composition API

Use the onUpdated function to register the update hook:

import { onUpdated } from 'vue';

export default {
    setup() {
        onUpdated(() => {
            // Operations after DOM update
        });
    }
}

Comparison of Use Cases for watch and updated

Understanding the difference between watch and updated is crucial for choosing the correct solution:

Complete Solution Example

Based on the original problem, here is the complete improved solution using updated:

export default {
    template: `
        <div class="undo-margin">
            <div class="gradient">
                <img v-bind:src="blogPost.thumbnail"/>
                <h1 class="align-bottom">{{blogPost.title}}</h1>
            </div>
            <div class="container bg-faded">
                <article v-html="blogPost.article"></article>
            </div>
        </div>
    `,
    props: ["blogid"],
    data() {
        return {
            blogPost: {},
            isAdmin: false
        };
    },
    mounted() {
        this.getBlogPost(this.blogid);
    },
    methods: {
        getBlogPost(blogid) {
            fetch(`/api/blog/${blogid}`)
                .then(response => response.json())
                .then(data => {
                    this.blogPost = data;
                })
                .catch(error => {
                    console.error('Failed to fetch blog data:', error);
                });
        }
    },
    updated() {
        // DOM is fully updated, safe to execute jQuery operations
        if (this.blogPost.article) {
            jQuery("pre").each((i, element) => {
                hljs.highlightElement(element);
            });
        }
    }
};

Performance Optimization Recommendations

Since updated triggers after every data change, performance optimization is important:

1. Use conditional checks to avoid unnecessary operations
2. For frequently updating components, consider using nextTick to delay non-critical operations
3. In Vue3, watchEffect can be combined with DOM update detection

Conclusion

The updated lifecycle hook provides a reliable mechanism for executing operations after DOM updates in Vue components. Compared to watch, it ensures correct timing for DOM operations, avoiding temporary solutions like setTimeout. Developers should choose the appropriate response mechanism based on specific needs: use watch for pure data logic and updated for DOM-related operations. With the popularity of Vue3, onUpdated in the Composition API offers more flexible hook registration, but the core principles remain unchanged.