vue.$nextTick浅析

最新推荐文章于 2023-04-05 20:02:33 发布

风不在乎

最新推荐文章于 2023-04-05 20:02:33 发布

阅读量226

点赞数

分类专栏： vue.js 文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/wind_notcare/article/details/129261865

版权

vue.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

$nextTick用于在数据更新和DOM渲染后执行回调，确保能获取到最新的DOM状态。它在DOM更新的异步队列中工作，可以解决因DOM未及时更新导致的问题。文章通过示例解释了$nextTick在创建周期、数据变更和DOM操作中的使用，并探讨了其源码实现，包括Promise和MutationObserver的使用情况。

摘要由CSDN通过智能技术生成

$nextTick调用时机以及作用

当数据更新并在dom中渲染后，会自动调用执行，简单来说就是获取更新之后的dom

由于vue响应式不是数据改变dom立即改变，所以未使用$nextTick之前立即去获取dom数据，得到的是改变之前的数据

示例

<template>
    <div>
        <div @click='changeMsg' ref="btnone">{{msg1}}</div>
        <div @click='changeMsg' ref="btntwo">{{msg2}}</div>
    </div>
</template>
<script>
export default{
    data(){
         return{
            msg1:'hello',
            msg2:'hello word'
         }
    }，
    methods:{
        changeMsg(){
            this.msg1 = 'hello1'
            this.msg2 = 'hello1 word'
            console.log(this.$refs.btnone.innerText);    // hello
            this.$nextTick(()=>{
                console.log(this.$refs.btntwo.innerText);    // hello1 word
            })
        }
    }
}
</script>

应用场景

在vue生命周期create()函数中进行dom操作

原因：在create()函数执行的时候，dom没有渲染，这个时候进行dom操作会报错，所以一定要将操作dom的动作也就是js代码放在$nextTick的回调函数中

<template>
    <div>
        <div @click='changeMsg' ref="btnone">{{msg1}}</div>
        <div @click='changeMsg' ref="btntwo">{{msg2}}</div>
    </div>
</template>
<script>
export default{
    data(){
         return{
            msg1:'hello',
            msg2:'hello word'
         }
    }，
    created(){
        console.log(this.$refs.btnone.innerText);    // 报错 Error in created hook: "TypeError: Cannot read properties of undefined (reading 'innerText')
        this.$nextTick(()=>{
            console.log(this.$refs.btntwo.innerText);    // hello word
        })
    }
}
</script>

在数据变化后立即执行的某个操作，而这个操作需要用到随数据改变而改变的dom结构

原因：vue异步执行dom更新，只要观察到数据变化，vue将开启一个队列，并缓存在同一事件中的所有数据改变，如果同一个watch被多次触发，只会记录最后一次。然后再下一个事件循环中，vue刷新队列并执行已去重的工作，vue 在内部尝试对异步队列使用原生的 promise.then和MessageChannel，如果执行环境不支持，会采用 setTimeout代替。

例如，当你设置vm.data = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在事件循环队列清空时的下一个“tick”更新。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

<template>
    <div>
        <h1 ref="hbox" style="white-space: pre-wrap;">{{hmsg}}</h1>
        <button @click='changeMsg'>点击加一行</button>
    </div>
</template>

<script>
    import {
        nextTick
    } from "vue";
    export default {
        data() {
            return {
                hmsg: '',
            }
        },
        methods: {
            changeMsg() {
                this.hmsg += '我是标题\n'
                console.log(this.$refs.hbox.offsetHeight);    // 0
                this.$nextTick(()=>{
                    console.log(this.$refs.hbox.offsetHeight);    // 42
                })
            }
        }
    }
</script>

nextTick源码浅析

使用方法

nextTick用于延迟执行一段代码，接收两个参数：回调函数和执行回调函数的上下文环境，如果没有提供回调函数，将返回一个promise对象

源码

/**
 * Defer a task to execute it asynchronously.
 */
export const nextTick = (function () {
  const callbacks = []
  let pending = false
  let timerFunc

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

  // the nextTick behavior leverages the microtask queue, which can be accessed
  // via either native Promise.then or MutationObserver.
  // MutationObserver has wider support, however it is seriously bugged in
  // UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
  // completely stops working after triggering a few times... so, if native
  // Promise is available, we will use it:
  /* istanbul ignore if */
  if (typeof Promise !== 'undefined' && isNative(Promise)) {
    var p = Promise.resolve()
    var logError = err => { console.error(err) }
    timerFunc = () => {
      p.then(nextTickHandler).catch(logError)
      // 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)
    }
  } 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
    var counter = 1
    var observer = new MutationObserver(nextTickHandler)
    var textNode = document.createTextNode(String(counter))
    observer.observe(textNode, {
      characterData: true
    })
    timerFunc = () => {
      counter = (counter + 1) % 2
      textNode.data = String(counter)
    }
  } else {
    // fallback to setTimeout
    /* istanbul ignore next */
    timerFunc = () => {
      setTimeout(nextTickHandler, 0)
    }
  }

  return function queueNextTick (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()
    }
    if (!cb && typeof Promise !== 'undefined') {
      return new Promise((resolve, reject) => {
        _resolve = resolve
      })
    }
  }
})()