关于vue的nexttick？ - CNode技术社区

this.a = 1; this.$nexttick(() => { console.log(‘nexttick1’) }) this.b = 2; this.$nexttick(() => { console.log(‘nexttick2’) }); 谁能帮我讲解一下啊。底层原理。

chenkai0520 1楼•3 年前

https://github.com/vuejs/vue/blob/dev/src/core/util/next-tick.js

1269886839 2楼•3 年前作者

@chenkai0520 这个源码我看了好多遍了。开一个微任务。执行。除非this.a = 1。跟this.b = 2。是同步任务。不然nexttick怎么会在两次dom更新后执行。但是你觉得 dom 更新是同步吗？vue 不是有批处理的啊。

chenkai0520 3楼•3 年前

@1269886839 dom更新会阻塞js的执行，你可以理解成同步的， https://medium.com/@francesco_rizzi/javascript-main-thread-dissected-43c85fce7e23

oyosc 4楼•3 年前

@1269886839 这个建议你看下js的事件循环机制，vue跟这个关系不大

1269886839 5楼•3 年前作者

我说一下我的最新理解。看大佬能不能帮忙纠正。 this.$nexttick 的时候其实已经调用 $nexttick 的 getter 已经进入 wathcer 队列。后边的this.a this.b这些都进队列。所以watcher的微任务要比 $nexttick 函数里边的微任务队列要先。是不是这个意思。