前端VUE中nextTick的实际应用场景

薛如花 2024-03-19 16:20:49  50714 赞同 0 反对 0

分类：资源标签：前端

nextTick的实际应用场景

1.描述

等待下一次 DOM 更新刷新的工具方法。当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。

nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise。

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

const count = ref(0)

async function increment() {
count.value++

// DOM 还未更新
console.log(document.getElementById('counter').textContent) // 0

await nextTick()
// DOM 此时已经更新
console.log(document.getElementById('counter').textContent) // 1
}
</script>

<template>
<button id="counter" @click="increment">{{ count }}</button>
</template>

2.实际应用场景

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

<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 (()=>{ //在nextTick中执行回调
const listItem = document.querySelector('li:last-child')
listItem.scrollIntoView({behavior: 'smooth'})
})
}
</script>

<style lang="css" scoped>
li{
list-style: none;
font-size: 64px;
height: 100px;
background-color: #42b883aa;
margin: 10px;
}
</style> 掌握 nextTick 的作用和实现原理，能够更好地处理 Vue 中的异步更新，提高代码的性能和质量。

如果您发现该资源为电子书等存在侵权的资源或对该资源描述不正确等，可点击“私信”按钮向作者进行反馈；如作者无回复可进行平台仲裁，我们会在第一时间进行处理！

评价 0 条

相关资源

小狐狸ChatGPT系统 H5前端底部菜单导航文字 2023-12-27 52301 浏览
小狐狸ChatGPT系统 H5前端底部菜单导航
前端：收集非常实用的JS代码，值得收藏！ 2023-12-25 50615 浏览
今天给大家分享js实用的代码片段，值得收藏！
干货：前端工程师实用的网站合集，值得收藏！ 2023-12-25 52299 浏览
今天给大家分享前端工程师常用的网站，主要分为两类：学习充电，接单挣钱。
前端：分享7 个常用的 Vue.js 开源组件库，你都用过吗？ 2023-12-25 51292 浏览
目前主流的前端开发框架当中Vue.js 应该是热度最高的，现在国内许多互联网公司都采用了Vue作为前端框架，今天就来给大家分享7个非常常用的vue.js 开源组件库，可以大大节省我们实际开发的工作量，每天上班早九晚六又近了一大步！
前端：vue-element-admin 搭建踩坑笔记 2023-12-25 50588 浏览
vue-element-admin搭建过程中可能会遇到各种各样的安装依赖问题，今天给大家分享一下如何解决这些问题。
前端：分享JS中7个高频的工具函数，值得收藏！ 2023-12-25 48661 浏览
JavaScript 实用函数是有用的、可重复使用的片段，您可以在许多不同的项目中重复使用。它们的目的是为常见任务提供一致且高效的输出，并帮助提高代码的一致性。因此在我们的日常开发中，经常整理和维护一套适合自己的函数工具库还是很有必要的。在本文中，我想重点介绍我在许多项目中使用的 7 个实用函数，并解释它们的用途。
前端：console 10 中使用小技巧，你都用过吗？ 2023-12-25 50945 浏览
今天给大家分享前端：console 10 中使用小技巧
前端福利！10个短小却超实用的JavaScript 代码段 2023-12-25 53544 浏览
JavaScript正变得越来越流行，它已经成为前端开发的第一选择，并且利用基于JavaScript语言的NodeJS，我们也可以开发出高性能的后端服务，甚至我还看到在硬件编程领域也出现了JavaScript的身影。JavaScript正在逐渐进化为一门全能的开发语言。下面是我收集的10段实用JavaScript代码，基于它们你还可以创造出更强大的JS插件或功能函数。
前端常用60余种工具方法 2023-12-25 51869 浏览
可以 ctrl + f 关键字搜索，看看有没有你想要的方法。
web前端：关于浏览器内核的多线程机制 2023-12-25 48414 浏览
浏览器内核即浏览器底层最核心和最基础的那一部分，它主要负责对网页当中的html、css、JavaScript进行解释然后在浏览器当中进行渲染最终呈现给用户，也就是说内核的工作就是渲染，所以我们常常把浏览器内核称为渲染引擎（Rendering Engine）也称为布局引擎（Layout Engine）、排版引擎。另外，由于不同浏览器的渲染内核不同，对 html、css、 JavaScript的语法解释也存在差异（兼容问题），因此我们在开发过程中需要在不同内核的浏览器当中进行网页渲染效果的测试。

前端VUE中nextTick的实际应用场景

相关资源

关注我们