请问老师关于nextTick

Question

老师关于nextTick我不是很理解。

如果nextTick基于micro的话，那么调用$nextTick传入的cb会在本次Tick的micro task中执行，换句说说页面并非真正的渲染也没有开始paint。而之所以通过$nextTick可以获取到更新后的值，是说异步更新策略当开始执行flushCallBack函数的时候，比如这段代码

<template>
  <div id="app">
    <div id="app1">{{ message }}</div>
    <router-view />
  </div>
</template>
<script>
import { addNotification } from '@/helpers/notice';
export default {
  data() {
    return {
      message: '1',
    };
  },
  mounted() {
    addNotification();
    const app1 = document.getElementById('app1');
    this.message = 'wang.haoyu';
    this.$nextTick(() => {
      console.log(app1.innerHTML, 'inner should be 1');
    });
  },
};
</script>

当flush Callback执行到this.message = 'wang.haoyu';这个异步更新函数的时候，他就会更新DOM节点(而并非立即绘制页面)，所以放在之后的nextTick可以获取到上一步micro对于message的修改。请问老师可以这样理解吗

Answer 1

ustbhuangyi 2021-02-07 09:58:45

没太看懂你说的，不过我可以在解释一下你这个示例，当执行 this.message = 'wang.haoyu' 触发了 setter，进而触发了render watcher 的 update，执行 queueWatcher，然后在 nextTick 后执行 flushSchedulerQueue。 然后你在代码中又主动执行了 this.$nextTick，我们知道 nextTick 函数的实现是把回调函数 cb 推入到一个数组 callbacks 中，然后在一个 tick 后遍历执行，显然，数组先添加的函数先执行，所以组件重新渲染会先执行，你自己手动执行 this.$nextTick 的回调函数会后执行，所以你能在回调函数中访问更新后的 DOM。