浅谈Vue中的NextTick。

这篇具有很好参考价值的文章主要介绍了浅谈Vue中的NextTick。。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、NextTick()

        等待下一次 DOM 更新刷新的工具方法。(在修改数据后使用这个方法,能获取更新的dom)

        当你在 Vue 中更改响应式状态时,最终的 DOM 更新并不是同步生效的,而是由 Vue 将它们缓存在一个队列中,直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变,都仅执行一次更新。nextTick() 可以在状态改变后立即使用,以等待 DOM 更新完成。你可以传递一个回调函数作为参数,或者 await 返回的 Promise。(节省性能,如果每次更新都直接触发dom更新,消耗性能,vue本身就是创建虚拟dom也就是JS对象来节省开销,批量执行dom,可以避免不需要的DOM更新)

二、实例

<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>

三、NextTick源码

import { noop } from 'shared/util'
import { handleError } from './error'
import { isIE, isIOS, isNative } from './env'

export let isUsingMicroTask = false

const callbacks = []
let pending = false

function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

// Promise is available, we will use it:
/* istanbul ignore next, $flow-disable-line */
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks)
    // In problematic UIWebViews, Promise.then doesn't completely break, but
    // it can get stuck in a weird state where callbacks are pushed into the
    // microtask queue but the queue isn't being flushed, until the browser
    // needs to do some other work, e.g. handle a timer. Therefore we can
    // "force" the microtask queue to be flushed by adding an empty timer.
    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  // PhantomJS and iOS 7.x
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  // Use MutationObserver where native Promise is not available,
  // e.g. PhantomJS, iOS7, Android 4.4
  // (#6466 MutationObserver is unreliable in IE11)
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
    characterData: true
  })
  timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  // Fallback to setImmediate.
  // Technically it leverages the (macro) task queue,
  // but it is still a better choice than setTimeout.
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  // Fallback to setTimeout.
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  if (!pending) {
    pending = true
    timerFunc()
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

四、总结

        如果当前环境支持Promise,NextTick()里面是借助Promise来强制刷新微任务队(setTimeout(noop))。除此之外,内部还有一些优雅降级操作。

        补充:setTimeout(noop)中的noop是一个空函数,它不做任何实际的操作。调用setTimeout(noop)会在下一个宏任务中添加一个空的定时器,这个定时器在执行时不做任何事情。这样做的目的是为了在当前的宏任务队列中添加一个任务,以确保微任务队列得到正确的刷新。

        文章来源地址https://www.toymoban.com/news/detail-792231.html

到了这里,关于浅谈Vue中的NextTick。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 揭秘Vue 2中的$nextTick:等待DOM更新的神奇时刻!

    在 Vue 2 中, $nextTick 是一个异步方法,用于在下次 DOM 更新循环结束后执行回调函数。 它的原理可以解析如下: Vue 2 维护了一个队列,用于存储需要延迟执行的回调函数。 下面是一个简单的代码案例,演示了 Vue 2 中的 $nextTick 方法和队列机制: HTML: JavaScript: 在上述代码中,

    2024年02月12日
    浏览(36)
  • 前端性能优化的利器 ——— 浅谈JavaScript中的防抖和节流

    防抖和节流函数是工作中两种常用的前端性能优化函数,今天我就来总结一下什么是防抖和节流,并详细说明一下如何在工作中应用防抖和节流函数 在 JavaScript 中,防抖(debounce)和节流(throttle)是用来限制函数执行频率的两种常见技术。 防抖(debounce) 是指在某个时间段

    2024年02月14日
    浏览(48)
  • vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: “TypeError: Cannot read properties of und

    vue使用vue-element-admin报错: 原因是: 其中 ayout=\\\"prev, pager, next\\\" 的pager拼写错了

    2024年02月16日
    浏览(78)
  • Vue前端 更具router.js 中的meta的roles实现路由卫士,实现权限判断。

    参考了之篇文章 1、我在登陆时获取到登录用户的角色名roles,并存入sessionStorage中,具体是在login页面实现,还是在menu页面实现都可以。在menu页面实现,可以显得登陆快一些。 2、编写router.js,注意,一个用户可能有多个角色。 这里有个bug 我们的roles存在sessionStorage中,关闭

    2024年02月13日
    浏览(44)
  • 已配置vue.config.js中的proxy代理,前端本地环境仍然请求后端出现跨域报错

    已配置vue.config.js中的proxy代理,前端本地环境仍然请求后端出现跨域报错 已配置vue.config.js中的proxy代理,前端本地环境仍然请求后端出现跨域报错 控制台仍然出现cors禁止报错,接口调不通 配置proxy代理解决跨域问题的原理是: 前端工程本地环境会启动一个 express 或 koa 的

    2024年02月01日
    浏览(56)
  • Node.js中的process.nextTick与浏览器环境中的nextTick有何不同?

    nextTick 是一个用于异步操作的函数,用来在当前执行栈执行完毕后,在下一个事件循环中执行指定的回调函数。它通常用于在本轮事件循环结束前执行一些需要延迟执行的代码。 具体来说, nextTick 将指定的回调函数放入微任务队列中,确保在下一个事件循环中立即执行。这

    2024年02月12日
    浏览(43)
  • JavaScript - 判断当前时间是否在指定区间内,例如:9:00~12:00(检查当前时间是否处于规定的两个时间段范围内),适用于 vue.js / uniapp / 微信小程序等前端项目

    例如,您想知道当前时间是否处于 9:00 ~ 12:00 时间区间内,然后根据这个判断进而实现业务逻辑。 如下示例所示, 本文提供一个函数,您只需要传入 2 个时间区间,便可得出当前时间是否在该时间区间范围内: 您可以一键复制,直接粘贴到您的项目中。 您只需要传入开始时

    2024年02月16日
    浏览(60)
  • 在vue中如何使用nextTick ?nextTick 的原理是什么?

    Vue.js 是一个流行的前端框架,它提供了一种响应式的数据绑定机制,使得页面的数据与页面的 UI 组件之间能够自动同步。Vue.js 中的数据驱动模型可以让开发者专注于业务逻辑,而不用过多地关注页面 DOM 操作的细节。然而,在某些情况下,我们需要在页面中进行 DOM 操作,而

    2023年04月20日
    浏览(37)
  • Vue $nextTick

    我们用一个例子来说明$nextTick的作用: 我们用一个变量showIpt来控制input框的显示和隐藏,默认是隐藏。 我们点击一个按钮后显示这个输入框的同时,input还要自动获取焦点。 但是我们点击按钮过后并没有生效。    为什么?this.showIpt=true执行过后接着就是执行this.$refs.ipt.fo

    2024年02月08日
    浏览(33)
  • vue3 nextTick()应用

    在Vue3中,可以使用 nextTick 函数来延迟执行某些操作,这些操作会在下一次DOM更新周期之后执行。这个函数通常用于在数据更新后,等待DOM更新之后执行一些操作,比如获取DOM元素的尺寸、位置等。 例如,以下一个切换元素显示的组件: 打印结果: 如果show是true,那么conte

    2024年02月04日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包