聊聊vue的nextTick方法

最新推荐文章于 2025-05-29 11:00:37 发布

LiuPing_Xie

最新推荐文章于 2025-05-29 11:00:37 发布

阅读量1k

点赞数 22

CC 4.0 BY-SA版权

分类专栏：前端小知识拓展文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_36877763/article/details/136707965

本文详细解释了Vue中的nextTick机制，它是如何在DOM更新完成后执行回调的，以及在列表增删操作中确保滚动到最新元素的应用场景。同时，通过手写nextTick，展示了MutationObserver在监控DOM变化中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

nextTick是面试常考的vue中的一个重要知识点，但是很多小伙伴常常无法真正的理解nextTick的执行机制，并且背后包含的许多vue的重要知识。本文会把nextTick聊的非常细，让大家彻底搞懂它。

正文

那么在nextTick正式登场之前呢，我们先看一个例子：

页面上有20个li元素，当点击更新列表按钮时，页面会增加10个里li元素。假如现在为了提供用户更好的体验，将页面滚动到新添加元素中最后一个元素的位置，scrollIntoView 原生JS自带的方法，滚动到指定的dom结构上去，behavior: 'smooth' 指定什么类型的滚动行为。那么该如何去书写？下面的写法可以吗？

<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进去，而不是整个数组
    list.value.push(...(new Array(10).fill(1)))
    const liItem = document.querySelector('li:last-child')
    liItem.scrollIntoView({ behavior: 'smooth' })
}
</s