<div id="outer" @click="fn">
  <div @click="fn" id="inner">
    click me
  </div>
</div>

methods: {
    fn() {
      console.log('start');
      setTimeout(() => {
        console.log('timeout');
      }, 0);
      this.$nextTick(() => {
        console.log('nextTick');  
        this.$nextTick(() => { console.log('nextTick2'); });
        setTimeout(() => { console.log('timeout2'); });
      });
      console.log('end');
    }
  }

点击outer的时候，执行fn的结果如下

因为nextTick是基于promise实现的，优先级高于setTimeout

start
end
nextTick
nextTick2
timeout
timeout2

点击inner的时候，由于冒泡会执行两次fn，结果如下：

start
end
nextTick
nextTick2
start
end
nextTick
nextTick2
timeout
timeout2
timeout
timeout2

点击 inner，根据事件冒泡机制，会执行两次 click事件，即两次 fn。DOM事件的执行机制，其实有点类似于 setTimeout，也是基于异步队列和 event loop实现的。而不是用原生 js执行了两次 fn();

这就类似于用 setTimeout触发了两次 fn

setTimeout(fn);
setTimeout(fn);

以上参考自https://coding.imooc.com/learn/questiondetail/173346.html
老师我的理解是 => 您看是否有问题
是因为primise是微任务，Promise（它只是异步管理工具，并不代表就是异步）中没有异步，实际这里就当作同步就行了，事件轮询机制，先执行微任务队列，再dom渲染，紧接着执行第二次fn，过程还是一样，最后执行宏任务（setTimeout），即将两次调用fn的宏任务全执行完。我理解主要是微任务之后就尝试渲染了，因此会nextTick、nextTick2就执行start、end了。