Understanding Vue.js nextTick: Mechanism, Usage, and Custom Implementation

Introduction – nextTick is a frequently asked interview topic in Vue.js because it reveals important rendering mechanics; many developers struggle to grasp its execution flow.

Problem scenario – A page initially displays 20 li elements. Clicking a button adds 10 more li items and attempts to scroll the last new element into view with element.scrollIntoView({ behavior: 'smooth' }). The scroll stops halfway because the DOM has not finished updating.

Initial code (incorrect approach)

<template>
    <div>
        <button @click="updateList">更新列表</button>
        <ul>
            <li v-for="n in list">{{ n }}</li>
        </ul>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const list = ref(new Array(20).fill(0))
const updateList = () => {
    // push elements one by one
    list.value.push(...(new Array(10).fill(1)))
    const liItem = document.querySelector('li:last-child')
    liItem.scrollIntoView({ behavior: 'smooth' })
}
</script>

<style lang="css" scoped>
li{
    height: 100px;
    background-color: #21e07a;
    margin: 10px;
}
</style>

Why it fails – Vue’s component lifecycle runs the click handler before the DOM reflects the newly added li elements. The call to document.querySelector('li:last-child') may retrieve an element that hasn’t been rendered yet, causing the scroll to stop.

Solution with nextTick – By deferring the scroll logic until after Vue finishes updating the DOM, the operation works reliably.

Correct code using nextTick

<script setup>
import { nextTick, ref } from 'vue';

const list = ref(new Array(20).fill(0))
const updateList = () => {
    list.value.push(...(new Array(10).fill(1)))
    nextTick(() => {
        const liItem = document.querySelector('li:last-child')
        liItem.scrollIntoView({ behavior: 'smooth' })
    })
}
</script>

The page now scrolls smoothly to the newly added last item.

Hand‑written nextTick implementation

function myNextTick(fn) {
    let app = document.getElementById('app')
    // Observe DOM changes
    var observerOptions = {
        childList: true, // added/removed child nodes
        attributes: true, // attribute changes
        subtree: true   // monitor descendants
    };
    // Create a MutationObserver that calls fn when the DOM update finishes
    let observer = new MutationObserver((el, obs) => {
        fn()
    })
    observer.observe(app, observerOptions)
}

This custom myNextTick uses the native MutationObserver to watch for DOM mutations on the element with id app. When the observed changes match the specified options, the callback runs, ensuring the supplied function executes only after the DOM has been updated.

Conclusion – Using Vue’s built‑in nextTick (or a hand‑rolled version based on MutationObserver) guarantees that DOM‑dependent logic runs at the correct moment, preventing issues like incomplete scrolling.