加载中...

vue的$nextTick的使用+源码分析

吴佳
2020-12-27 15:57:58
分类:Vue
131
1
0

前言

各位!久等了。
时隔五个月,我又开始更新公众号博客了。最近自己有点懒散,造成这么长一段时间公众号和博客断更了,在这里对关注我的各位同学们说声抱歉!!
这几个月一直忙于工作,休息时间是一半追剧,一半用来去提升自己了,然后看点书玩玩基金什么的,荒废了不少时间。最近也在一直调整自己的状态,觉得还是要更新起来,把自己学到的一些东西分享给各位同学,这样对于一个技术人来说,是一件有意义的事情!
上面扯了半天白话,说了最近自己的状况,还是快点进入主题吧。

正文

开始前,我觉得我们需要先弄清楚vue的$nextTick是干什么用的,它的存在是为了解决什么问题?大家也可以自问一下。

nextTick英文翻译过来“下一个记号或者标记”,我觉得这里应该用状态来描述更加合理一些。

上面,我抛了一个问题,现在来聊一聊这个问题,首先说一说nextTick的作用,这里我就直接引用官网api上的一句话,我觉得已经说的非常清楚了:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上

再看一下官网的例子:

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // 修改数据
      this.message = 'changed'
      // DOM 还没有更新
      this.$nextTick(function () {
        // DOM 现在更新了
        // `this` 绑定到当前实例
        this.doSomethingElse()
      })
    }
  }
})

上面我用了官网的例子和解释,我觉得例子还没完全说明白nextTick解决了什么样的问题,所以我觉得我需要补充一下我自己的理解。
大家都知道,在vue的created生命周期里面,如果你需要在这个生命周期钩子里面操作dom是不行的,因为这个钩子执行的时候dom并没有渲染到页面上,所以会直接报错。
这里有的同学就说,如果我必须要在这里操作dom呢?那这个时候就到了$nextTick登场的时候,根据官方的解释和例子也可以证明这一点,nextTick的参数回调函数执行的时候就是dom已经渲染到了页面,挂载好了,并且把当前this绑定到了当前的实例上面去了,这个时候就可以获取到更新后的dom元素去操作dom。
其实真正的用意,并不是为了解决这个,其实是为了解决响应式更新的问题。
我们都知道,vue是响应式的,什么是响应式?简单说,就是数据变了,视图变,视图变了,数据变。这样一来就有一个问题,不知道大家发现了没,如果没发现,我们就先看一下下面这段代码

<template>
  <div>
    {{a}}
    {{b}}
    {{c}}
  </div>
</template>
new Vue({
  data () {
    return {
      a: 1,
      b: 2,
      c: 3
    }
  },
  created () {
    this.a = 2
    this.b = 3
    this.c = 4
  }
})

上面这段代码看似很简单,对不对。但是这里有一个很有趣的事,大家先想一想,我们说了vue是响应式的,那当我们this.a做重新赋值的时候是不是就把a的值进行修改了,那修改了是不是就应该要触发页面的更新,把最新的值显示到页面上去,按理来说应该会更新三次对吧,因为我们先修改了a,然后修改b,最后修改的是c,但是结果告诉我们页面只更新了一次,为什么呢?
说到底,这是因为nextTick方法在里面作怪,我觉得这个做法非常聪明,这样可以将性能损失降到最小。
这里只更新一次是因为在源码上,在收集更新Wathcer时将更新通过nextTick方法做了延迟执行,所以当更新的时候,是先把所有的更新Wathcer收集了起来,然后调用nextTick方法做延迟更新的执行,这样一来,赋值操作就是在前一直更新数据,更新就会不断的添加更新Wathcer到队列中,最后只需要拿出队列中的所有更新Wathcer去进行挨个更新,这样一来就会是现在看到的这样,在赋值的时候并不会马上更新反应到页面,而是会先等你的赋值都做完后,最后统一更新,这样就解决了页面更新频率问题。

下面我们来看看官方的对应源码,来证明一下我说的是不是这样的。代码位置在github对应:vue/blob/dev/src/core/observer/scheduler.js文件中,大家可以去看一下

/**
 * Push a watcher into the watcher queue.
 * Jobs with duplicate IDs will be skipped unless it's
 * pushed when the queue is being flushed.
 */
export function queueWatcher (watcher: Watcher) {
  const id = watcher.id
  if (has[id] == null) {
    has[id] = true
    if (!flushing) {
      queue.push(watcher)
    } else {
      // if already flushing, splice the watcher based on its id
      // if already past its id, it will be run next immediately.
      let i = queue.length - 1
      while (i > index && queue[i].id > watcher.id) {
        i--
      }
      queue.splice(i + 1, 0, watcher)
    }
    // queue the flush
    if (!waiting) {
      waiting = true

      if (process.env.NODE_ENV !== 'production' && !config.async) {
        flushSchedulerQueue()
        return
      }
      // 这里就是延迟更新的处理 - 使用nextTick去解决频繁更新的问题。
      // 上面的那些代码是在做watcher收集
      nextTick(flushSchedulerQueue)
    }
  }
}

上面说完了使用,下面就是干货了,我们来说说nextTick的原理实现,分析一下源码是怎么写的。

源码分析

源码对应位置在github的vue/blob/dev/src/core/util/next-tick.js文件

/* @flow */
/* globals MutationObserver */

import { noop } from 'shared/util'
import { handleError } from './error'
import { isIE, isIOS, isNative } from './env'
export let isUsingMicroTask = false

const callbacks = [] // 存放收集的nextTick第一参数的回调函数
let pending = false // 状态开关

// 该函数将异步执行时 处理队列中收集到的所有回调 挨个执行
function flushCallbacks () {
  pending = false
  // 将队列中的回调全部赋值给copies
  const copies = callbacks.slice(0)
  callbacks.length = 0 // 清空队列
  // 遍历当前的队列,挨个执行回调
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}


// 定义一个 最后可拿到异步处理方式的变量
let timerFunc

// 如果当前环境支持promise ,那么异步的处理将使用promise去做延迟执行
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve() // 获得一个完成状态的promise
  // 将promise的异步处理函数赋值给 timerFunc
  timerFunc = () => {
    p.then(flushCallbacks) // 执行then函数,将执行收集到的调用队列处理函数执行

    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && 
  isNative(MutationObserver) ||
  // PhantomJS and iOS 7.x
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {

  // 环境不支持promise但支持 MutationObserver,将会用MutationObserver做为异步执行处理

  // (#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.
  // Techinically it leverages the (macro) task queue,
  // but it is still a better choice than setTimeout.
  // 当前环境如果不支持 promise 与 MutationObserver ,如果支持setImmediate,将会使用setImmediate做为异步执行处理
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else { 
  // 如果当前环境不支持以上三种异步方式,将直接使用setTimeout定时器做为异步处理
  // Fallback to setTimeout.
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

// 这个就是nextTick函数,参数两个:回调,上下文
export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  // 向队列中添加收集的回调,这里要注意,push时加了一层函数包装
  callbacks.push(() => {
    if (cb) { // 判断是否传递了 回调
      try {
        cb.call(ctx) // 通过call方法执行回调函数,并设置函数内部this指向到当前上下文
      } catch (e) {
         // 如果函数一旦执行报错,将抛错
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) { 
    // 当不是一个回调时,执行promise的resolve方法,将状态变为完成,并传入当前上下文对象作为完成时的入参
      _resolve(ctx)
    }
  })

  if (!pending) { // 这是一个等待状态开关
    pending = true // 等待当前的处理完后才开始下一次的
    timerFunc() // 这是一个关键函数,主要是做异步操作,并且针对各种情况做了兼容的不同处理
  }
  // $flow-disable-line
  // 如果没有回调函数,并且当前的环境支持promise,就直接返回一个promise
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

以上源码我做了注释,如果有不同见解的欢迎指正。
最后需要说一下重点的一个变量,就是timerFunc变量,它的最后值决定当前nextTick异步实现的处理方式,代码会挨个顺序判断兼容情况,最后选择一个最适合的方式:Promise,MutationObserver, setImmediate,setTimeout

扫码关注后,回复“资源”免费领取全套视频教程

前端技术专栏

1

发表评论(共0条评论)

请输入评论内容
啊哦,暂无评论数据~