vue核心面试题（nextTick实现原理）

青旅半醒 2023-02-20 13:51 169阅读 0赞

### 概念： ###

nextTick就是一个异步方法。nextTick 方法主要是使用了宏任务和微任务（事件循环机制），定义了一个异步方法，多次调用 nextTick 会将方法存入 队列中，通过这个异步方法清空当前队列。 所以这个 nextTick 方法就是异步方法 。

nextTick是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数。所有放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；

使用nextTick保证当前视图渲染完成。

promise是浏览器内部自己实现的一个微任务，内部使用的不是setTimeout，详细请看面试题中的promise总结。

### `nextTick`中定义的三个重要变量： ###

1.callbacks：用来存储所有需要执行的回调函数

2.pending：用来标志是否正在执行回调函数

3.timerFunc：用来触发执行回调函数

### nextTick的使用场景： ###

1. 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。

2.在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

### nextTick和$nextTick区别 ###

**1.nextTick(callback)：当数据发生变化，更新后执行回调。**在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

2.**$nextTick(callback)：当dom发生变化，更新后执行的回调。**将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

3.这两个方法没有太大的不同。区别在于：nextTick(callback) 是全局的方法；而 $nextTick(callback) 是回调的 `this` 自动绑定到调用它的实例上；所以用的更多的是$nextTick(callback)！

### 原理： ###

当调用nextTick方法时会传入两个参数，回调函数和执行回调函数的上下文环境，如果没有提供回调函数，那么将返回`promise`对象。首先将拿到的回调函数存放到数组中，判断是否正在执行回调函数，如果当前没有在pending的时候，就会执行timeFunc，多次执行nextTick只会执行一次timerFunc，timeFunc其实就是执行异步的方法，在timeFunc方法中选择一个异步方法（首先判断是否支持promise，如果支持就将flushCallbacks放在promise中异步执行，并且标记使用微任务。如果不支持promise就看是否支持MutationObserver方法，如果支持就new了一个MutationObserver类，创建一个文本节点进行监听，当数据发生变化了就会异步执行flushCallbacks方法。如果以上两个都不支持就看是否支持setImmediate方法，如果支持setImmediate 就去异步执行flushCallbacks方法。如果以上三种方法都不支持，就使用setTimeout），然后异步去执行flushCallbacks方法，flushCallbacks中就是将传递的函数依次执行。

nextTick多次调用会维持一个数组，之后会异步的把数组中的方法以此执行，这样的话用户就会在视图更新之后再获取到真实的dom元素。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDcyMDg2_size_16_color_FFFFFF_t_70][]

### 源码： ###

1.nextTick

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的时候，就会执行timeFunc
        pending = true
        timerFunc() // 多次执行nextTick只会执行一次，timerFunc就是一个异步方法
      }
      if (!cb && typeof Promise !== 'undefined') {
        return new Promise(resolve => {
          _resolve = resolve
        })
      }
    }
    //

2.flushCallbacks

const callbacks = [] // 回调函数集合
    let pending = false
    
    function flushCallbacks () { // 多个nextTick中传递的回调函数依次执行
      pending = false
      const copies = callbacks.slice(0)
      callbacks.length = 0
      for (let i = 0; i < copies.length; i++) {
        copies[i]()
      }
    }
    //flushCallbacks中会将函数备份一份，之所以要slice复制一份出来是因为有的cb执行过程中又会往callbacks中加入内容
    //比如$nextTick的回调函数里又有$nextTick，那么这些应该放入到下一个轮次的nextTick去执行
    //所以拷贝一份，遍历完成即可，防止一直循环下去。

3.timeFunc是一个异步方法

// 判断当前浏览器是否支持promise
    if (typeof Promise !== 'undefined' && isNative(Promise)) { // Promise
      const p = Promise.resolve()
      timerFunc = () => { // flushCallbacks就包裹了一个promise
        p.then(flushCallbacks) // 异步的去执行flushCallbacks
        if (isIOS) setTimeout(noop)
      }
      isUsingMicroTask = true // 标记了一下使用的是微任务
    } else if (!isIE && typeof MutationObserver !== 'undefined' && ( // MutationObserver 
      isNative(MutationObserver) ||
      MutationObserver.toString() === '[object MutationObserverConstructor]'
    )) {
      // 如果不是IE，并且支持原生的MutationObserver，也是一个微任务
      let counter = 1
      const observer = new MutationObserver(flushCallbacks) // new了一个MutationObserver类
      const textNode = document.createTextNode(String(counter)) // 创建了一个文本节点
      observer.observe(textNode, { // 原生api，帮我们监听一个节点
        characterData: true // 当数据发生变化了就会异步执行flushCallbacks方法
      })
      timerFunc = () => {
        counter = (counter + 1) % 2
        textNode.data = String(counter) // 数据更新
      }
      isUsingMicroTask = true // 标记了一下使用的是微任务
    } else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) { // setImmediate
      // setImmediate原生方法，默认ie下有，高版本的谷歌也支持
      timerFunc = () => {
        setImmediate(flushCallbacks)
      }
    } else { // setTimeout
      timerFunc = () => {
        setTimeout(flushCallbacks, 0)
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDcyMDg2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200627201207279.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDcyMDg2,size_16,color_FFFFFF,t_70