vue的执行机制

首先我们知道vue是异步渲染的,至于为什么要采用异步渲染,是因为如果不采取异步更新,那么每次更新数据都会对当前组件进行重新渲染,为了性能考虑,Vue 会在本轮数据更新后,再去异步更新数据。

随之而来的问题

如果是异步渲染,我们在修改数据时,如果立即去获取更新后的数据的话,虽然DOM更新了但是拿到的还是之前的数据,并且在下一轮渲染时,才会拿到上一轮更新的数据。

NextTick是什么

根据官方对其的定义:在下次 DOM 更新循环结束之后执行延迟回调 。在修改数据之后立即使用这个方法,获取更新后的 DOM
通俗来说就是使用NextTick可以立即获取dom更新后的数据进行更新。

如何使用及使用场景

该api的使用场景就是当dom发生变化时,想要立即获取更新后的数据时,就可以使用该api。

创建模板

首先我们用ulli来当作列表来渲染。然后给li标签使用v-for来循环渲染一个列表。并且在增添一个添加按钮并绑定点击事件。

<template>
  <div class="next_tick">
    <ul ref="ulRef">
      <li v-for="(item,index) in listArr" :key="index">{{ item}}</li>
    </ul>
<button @click="add">添加</button>
  </div>
</template>

实例

在data里面定义一个数组供li标签循环。

data () {
    return {
      listArr: ['随机数1','随机数2','随机数3']
    }
  },

方法

此时我们创建点击事件并且实现每点击一次按钮就新增一条随机数,并且渲染到ul这个列表里。然后在控制台打印列表的长度。

methods: {
    add() {
      this.listArr.push(Math.random())
        const ulele = this.$refs.ulRef;
        const length = ulele.childNodes.length;
        console.log('length',length)
    }
  }

遇到的问题

当我们点击新增按钮时,我们可以看到此时页面上已经渲染上去了,新增了一条随机数,但是我们尝试获取列表长度的时候,还是初始值3。

使用nextTick

使用nextTick之后,在去尝试获取列表长度。
methods: {
    add() {
      this.items.push(Math.random())
      this.$nextTick(() => {
        const ulele = this.$refs.ulRef;
        const length = ulele.childNodes.length;
        console.log('length',length)
      })

    }
  }
可以发现使用nextTick之后,可以实时获取长度了。

批量更新

发现一个有意思的地方就是vue会批量更新数据,并不会一条一条更新而是批量更新。

methods: {
      add() {
        this.items.push(Math.random())
        this.items.push(Math.random())
        this.items.push(Math.random())
        this.$nextTick(() => {
          const ulele = this.$refs.ulRef;
          const length = ulele.childNodes.length;
          console.log('length',length)
        })

      }
    }
同时新增了三个随机数,并没有打印三次,而是直接一次性打印出了一轮的数据更新结果。

原理

涉及到的四个函数nextTick、timeFun、flushCallbackssetTimeout

let pending=false;
let callBacks=[];//存放的是回调函数,存放的第一个回调函数是数据更新的回调函数
//调用this.$nextTick时执行的函数
function nextTick (cb, ctx) {
    var _resolve;
    callbacks.push(function () {
      if (cb) {
        try {
          cb.call(ctx);
        } catch (e) {
          handleError(e, ctx, 'nextTick');
        }
      } else if (_resolve) {
        _resolve(ctx);
      }
    });
    //在数据首次修改时,pending为false,修改后,pending变成true
    if (!pending) {
      pending = true;
      //在这里用到了事件循环
      timerFunc();
    }
    // $flow-disable-line
    if (!cb && typeof Promise !== 'undefined') {
      return new Promise(function (resolve) {
        _resolve = resolve;
      })
    }
}
//定义eventLoop函数
let timeFunc=null;
if (typeof Promise !== 'undefined' && isNative(Promise)) {
    var p = Promise.resolve();
    timerFunc = function () {
      p.then(flushCallbacks);

      if (isIOS) { setTimeout(noop); }
    };
    isUsingMicroTask = true;
  } else if (!isIE && typeof MutationObserver !== 'undefined' && (
    isNative(MutationObserver) ||
    // PhantomJS and iOS 7.x
    MutationObserver.toString() === '[object MutationObserverConstructor]'
  )) {
    var counter = 1;
    var observer = new MutationObserver(flushCallbacks);
    var textNode = document.createTextNode(String(counter));
    observer.observe(textNode, {
      characterData: true
    });
    timerFunc = function () {
      counter = (counter + 1) % 2;
      textNode.data = String(counter);
    };
    isUsingMicroTask = true;
  } else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
    timerFunc = function () {
      setImmediate(flushCallbacks);
    };
  } else {
    // Fallback to setTimeout.
    timerFunc = function () {
      setTimeout(flushCallbacks, 0);
    };
}
//清空事件队列中的回调函数,第一个回调函数是flushSchedulerQueue ()
function flushCallbacks () {
    pending = false;
    var copies = callbacks.slice(0);
    callbacks.length = 0;
    for (var i = 0; i < copies.length; i++) {
        copies[i]();
    }
}
//flushSchedulerQueue的核心代码,执行数据更新操作
function flushSchedulerQueue () {
    currentFlushTimestamp = getNow();
    flushing = true;
    var watcher, id;
    queue.sort(function (a, b) { return a.id - b.id; });
    for (index = 0; index < queue.length; index++) {
      watcher = queue[index];
      if (watcher.before) {
        //调用beforeUpdate()钩子函数
        watcher.before();
      }
      id = watcher.id;
      has[id] = null;
      //执行更新
      watcher.run();
    }
  }

在下次DOM更新循环结束之后执行的延迟回调。nextTick 主要使用了宏任务和微任务。根据执行环境分别尝试采用

VuenextTick 的实现原理总结如下

  • nextTickVue 提供的一个全局的API ,由于Vue的异步更新策略导致我们对数据的修改不会立马体现到都没变化上,此时如果想要立即获取更新后的dom的状态,就需要使用这个方法。
  • Vue在更新dom时是异步执行的。只要监听到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发,只会被推入到队列中一次。这种在缓存时去重对于避免不必要的计算和dom操作是非常重要的。nextTick方法会在队列中加入一个回调函数,确保该函数在前面的dom操作完成后才调用。 用一张图可以很好的描述下这个过程。

无论是微任务还是宏任务,都会放到flushCallbacks使用

这里将callbacks里面的函数复制一份,同时callbacks置空。依次执行callbacks里面的函数。

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

最后修改:2021 年 07 月 01 日 11 : 24 PM
本文作者:博主:    
文章标题:Vue中使用$nextTick解决异步渲染后获取不到更新后的数据的问题
本文地址:https://www.iftiger.com/archives/154.html     
版权说明:若无注明,本文皆为“泰戈尔のBlog”原创,转载请保留文章出处。
如果觉得我的文章对你有用,可以对我进行您主观即不限定金额大小的打赏。