详细分析nextTick的基本知识（附Demo）

码农研究僧

于 2024-07-15 08:00:00 发布

阅读量325

点赞数 5

分类专栏：前端/小程序文章标签： vue.js javascript 前端 nextTick

本文链接：https://blog.csdn.net/weixin_47872288/article/details/140279564

版权

前端/小程序专栏收录该内容

61 篇文章 4 订阅

订阅专栏

前言

实战中学习，一开始发现一直无法调用，后续加入该函数即可使用

1. 基本知识

nextTick 是 Node.js 中用于在当前操作完成后，尽可能快地执行一个回调函数的一个方法
在微任务队列（microtask queue）中执行，而不是在常规的事件队列（task queue）中执行

被广泛用于延迟执行一些代码，以确保当前事件循环中的所有代码先行执行

process.nextTick() 添加的回调函数在当前操作完成后立即执行，不等待 I/O 或定时器事件
process.nextTick() 的回调函数优先于 setImmediate 和 setTimeout 执行
确保一些必须在当前事件循环结束之前完成的操作不会被其他事件阻塞

主要用于

处理异步操作结果：确保在处理异步操作的结果之前，当前的函数已完成执行
递归操作：防止调用栈过深而引发的栈溢出问题
事件监听和回调管理：事件处理完毕后立即处理一些事件或回调，可以使用 nextTick

2. Demo

const fs = require('fs');

fs.readFile(__filename, () => {
  console.log('read'); // I/O 操作，会在事件循环的 I/O 阶段执行
});

process.nextTick(() => {
  console.log('Executed'); // 当前操作后立即执行
});

console.log('main'); //先输出，主线程

输出如下：

main 
Executed 
read

同样可适用于递归

function recursiveCall(n) {
  if (n === 0) return;
  console.log(n);
  process.nextTick(() => recursiveCall(n - 1));
}

recursiveCall(5);

以及异步操作

const asyncOperation = (callback) => {
  setTimeout(() => {
    console.log('0'); // 模拟一个异步操作，1秒后执行
    callback();
  }, 1000);
};

asyncOperation(() => {
  process.nextTick(() => {
    console.log('2'); //确保在回调函数的末尾执行 
  });
  console.log('1'); // 异步操作后，先执行此
});

输出如下：

0
1
2

3. 实操

以下为Vue3 的部分代码

确保 el-dialog 中的 CodeStandardsindex 组件正确引用，并且使用自闭合标签以避免 ESLint 错误：

<template>
  <!-- 省略的部分代码 -->
  <el-dialog
    title="危规号标准"
    v-model:visible="codeStandardsDialogVisible"
    width="80%"
  >
    <CodeStandardsindex ref="codeFormRef" />
  </el-dialog>
</template>

脚本部分
确保在调用 open 方法时，codeFormRef 已正确引用：

<script setup lang="ts">
import { ref } from 'vue';
import CodeStandardsindex from './CodeStandardsindex.vue'; // 引入 CodeStandardsindex 组件

const codeStandardsDialogVisible = ref(false);
const codeFormRef = ref();

const handleOpenCodeStandards = () => {
  codeStandardsDialogVisible.value = true;
  // 使用 nextTick 确保 codeFormRef 已经被正确引用
  nextTick(() => {
    if (codeFormRef.value) {
      codeFormRef.value.open();
    }
  });
};
</script>

codeFormRef可能输出值为undefined，所以需要进行将其渲染完毕之后再调用open这个弹窗

也同理Vue.js

用于在下一个 DOM 更新周期结束后执行指定的回调函数

DOM 操作：在数据改变后立即进行 DOM 操作
等待 Vue 更新完成：等待 Vue 完成更新后执行回调函数
防止数据变化带来的错误：确保在 DOM 更新完成后再执行某些依赖于更新后的 DOM 的操作

<!DOCTYPE html>
<html>
<head>
    <title>Vue 3 nextTick Example</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <p ref="paragraph">Counter: {{ counter }}</p>
        <button @click="increment">Increment</button>
    </div>

    <script>
        const { createApp, ref, nextTick } = Vue;

        createApp({
            setup() {
                const counter = ref(0);
                const paragraph = ref(null);

                const increment = () => {
                    counter.value++;
                    nextTick(() => {
                        console.log(paragraph.value.textContent); 
                    });
                };

                return {
                    counter,
                    paragraph,
                    increment
                };
            }
        }).mount('#app');
    </script>
</body>
</html>

码农研究僧

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
详细分析nextTick的基本知识（附Demo）

nextTick 是 Node.js 中用于在当前操作完成后，尽可能快地执行一个回调函数的一个方法在微任务队列（microtask queue）中执行，而不是在常规的事件队列（task queue）中执行被广泛用于延迟执行一些代码，以确保当前事件循环中的所有代码先行执行
复制链接

扫一扫