Javascript时间循环应用—nextTick()详解

简单易懂 关于nextTick()的理解-CSDN博客

【Vue面试专题】56道经典Vue面试题详解!说说nextTick使用和原理?_哔哩哔哩_bilibili

Vue.nextTick()

是 Vue.js 提供的一个全局 API,用于在 DOM 更新后执行延迟回调。它通常用于在数据更新后立即获取更新后的 DOM 状态 。了解 nextTick 可以帮助你更好地控制 DOM 更新的时机和顺序,避免在未更新的 DOM 上执行操作。

基本用法

callback 是一个函数,会在 DOM 更新完毕后执行。

复制代码
Vue.nextTick(callback);

使用场景

  • 等待 DOM 更新完成 :有时你会在数据变化后立即执行某些操作,但此时 DOM 可能还没有更新完毕。nextTick 确保你的代码在下一次 DOM 更新循环结束后运行。

  • 避免布局抖动 :在一次操作中多次更新数据和操作 DOM,可能会导致多次布局抖动(reflow/repaint)。使用 nextTick 可以将这些操作合并到一次更新中,提高性能。

  • 获取更新后的 DOM:有时需要在数据变化并更新 DOM 后立即操作 DOM 元素,例如滚动到某个位置、设置焦点等。

    {{ message }}
    <button @click="updateMessage">Update Message</button>
    <script> new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { updateMessage() { this.message = 'Hello World!'; Vue.nextTick(() => { console.log(this.$refs.message.textContent); // 'Hello World!' }); } } }); </script>

在这个示例中,当 updateMessage 方法被调用时,message 数据发生变化,DOM 将进行更新。通过 Vue.nextTick() 确保在 DOM 更新完成后访问 DOM 元素并打印新的文本内容。

  • 在Vue组件中使用

    <child-component></child-component>
    <script> Vue.component('child-component', { template: '
    Child Component
    ', mounted() { this.$nextTick(() => { console.log(this.$refs.child.textContent); // 'Child Component' }); } });

    new Vue({
    el: '#app'
    });
    </script>

在这个示例中,$nextTick 是 Vue 组件实例方法,用法与全局 Vue.nextTick 类似。它在组件 DOM 挂载后执行回调函数。

核心原理

事件循环:

JavaScript 是单线程 的,执行过程中存在一个事件循环机制。事件循环负责将任务(Tasks)按照顺序执行,分为宏任务(Macro Task)和微任务(Micro Task)。常见的宏任务有 setTimeout、setInterval,微任务有 Promise.then、MutationObserver 等。

浏览器工作原理与Javascript高级(前后端异步)-CSDN博客

事件循环(Event Loop)-CSDN博客

工作机制

  1. 执行一个宏任务(如从任务队列中取一个任务并执行)。
  2. 执行所有的微任务(如从微任务队列中取所有任务并执行)。
  3. 更新渲染(如果需要)。
  4. 重复(回到步骤 1)。

图解

示例代码

以下是一个包含宏任务和微任务的示例代码,帮助理解它们的执行顺序:

复制代码
console.log('script start');

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise 1');
}).then(() => {
  console.log('Promise 2');
});

console.log('script end');

script start
script end
Promise 1
Promise 2
setTimeout

执行顺序:

  1. 同步任务 :首先执行所有同步代码,即宏任务队列中的初始任务。
    • console.log('script start');
    • console.log('script end');
  2. 微任务 :然后执行微任务队列中的所有任务。
    • Promise.resolve().then(() => console.log('Promise 1'));
    • Promise.then(() => console.log('Promise 2'));
  3. 宏任务 :最后执行宏任务队列中的任务。
    • setTimeout(() => console.log('setTimeout'), 0);``​​​​​​​

任务队列

事件循环维护两个队列,宏任务队列和微任务队列。每次执行完一个宏任务后,都会清空微任务队列中的所有任务。当一个宏任务执行完毕后,事件循环会检查微任务队列,并执行所有的微任务,然后再执行下一个宏任务。

​​​​​​​

相关推荐
zwjapple3 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem6 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术6 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理6 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing6 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴7 小时前
简单入门Python装饰器
前端·python