vue中nextTick的实现原理及自定义一个nextTick

一、介绍

vue中的nextTick（组件实例是$nextTick）方法是比较常见的，一般想延迟执行某个逻辑时可以使用它。之前我们一般是用setTimeout(0)来模拟类似的操作。

其实，在浏览器中nextTick是用es6中的Promise实现的。它创建了一个resolve状态的Promise示例，以在下一轮微任务中执行它。在不支持Promise的环境中，优先用setImmediate，如果setImmediate也不支持则用setTimeout。

二、示例

来个简单的示例：

<template>
  <div>
    <a-button @click="changeState">点我</a-button>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { getWeekdayConfig } from "./http";
@Component({})
export default class Nexttick extends Vue {
  public state = 0;
  public changeState() {
    window.setTimeout(() => {
      console.log("settimeout 1");
    }, 0);
    console.log("同步 1");
    Promise.resolve().then(() => {
      console.log("promise 1");