个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
42
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章全面解析Vue中的$nextTick由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
当在代码中更新了数据，并希望等到对应的Dom更新之后，再执行一些逻辑。这时，我们就会用到$nextTick 。
|
1
2
3
4
|
funcion callback(){
//等待Dom更新，然后搞点事。
}
$nextTick(callback)；
|
官方文档对nextTick的解释是:
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM.
那么，Vue是如何做的这一点的，是不是在调用修改Dom的Api之后（appendChild, textContent = "xxxxx" 诸如此类），调用了我们的回调函数？ 实际上发生了什么呢.
nextTick的实现逻辑在这个文件里:
vue/src/core/util/next-tick.js 。
我们调用的this.$nextTick实际上是这个方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
export
function
nextTick (cb?: Function, ctx?: Object) {
let _resolve
callbacks.push(() => {
if
(cb) {
try
{
cb.call(ctx)
}
catch
(e) {
handleError(e, ctx,
'nextTick'
)
}
}
else
if
(_resolve) {
_resolve(ctx)
}
})
if
(!pending) {
pending =
true
timerFunc()
}
// $flow-disable-line
if
(!cb &&
typeof
Promise !==
'undefined'
) {
return
new
Promise(resolve => {
_resolve = resolve
})
}
}
|
可以看到 。
timerFunc定义在这里 。
可以看到timerFunc是在一个已resolve了的Promise的then 中执行了flushCallbacks. 。
所以，每当我们调用$nextTick，如果pending为false，就会调用timerFunc,然后timerFunc会把flushCallbacks给塞到事件循环的队尾，等待被调用.
|
1
2
3
4
5
6
|
if
(
typeof
Promise !==
'undefined'
&& isNative(Promise)) {
const p = Promise.resolve()
timerFunc = () => {
p.then(flushCallbacks)
}
}
|
然后在这个文件里还有一个函数叫：flushCallbacks 用来把保存的回调函数给全执行并清空.
|
1
2
3
4
5
6
7
8
|
function
flushCallbacks () {
pending =
false
const copies = callbacks.slice(0)
callbacks.length = 0
for
(let i = 0; i < copies.length; i++) {
copies[i]()
}
}
|
什么时候pending为true呢?
从timerFunc被调用到flushCallbacks被调用期间pending为true 。
即一个事件循环周期 。
在pending期间加入的回调函数，会被已经等待执行的flushCallbacks函数给执行.
看完源码，发现除了利用了一个微任务的机制，和Dom更新一点关系都没有哇.
其实调用nextTick的不仅是开发者，Vue更新Dom时，也用到了nextTick.
开发者更新绑定的数据之后，Vue就会立刻调用nextTick，把更新Dom的回调函数作为微任务塞到事件循环里去.
于是，在微任务队列中，开发者调用的nextTick的回调函数，就一定在更行Dom的回调函数之后执行了.
但是问题又来了，根据浏览器的渲染机制，渲染线程是在微任务执行完成之后运行的。渲染线程没运行，怎么拿到Dom呢?
因为，渲染线程只是把Dom树渲染成UI而已，Vue更新Dom之后，在Dom树里，新的Dom节点已经存在了，js线程就已经可以拿到新的Dom了。除非开发者读取Dom的计算属性，触发了强制重流渲染线程才会打断js线程.
以上就是解析Vue中的$nextTick的详细内容，更多关于Vue中的$nextTick的资料请关注我其它相关文章！ 。
原文链接：https://segmentfault.com/a/1190000038603172 。
最后此篇关于全面解析Vue中的$nextTick的文章就讲到这里了,如果你想了解更多关于全面解析Vue中的$nextTick的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
42
4
0
当在代码中更新了数据，并希望等到对应的Dom更新之后，再执行一些逻辑。这时，我们就会用到$nextTick ?
我是 Vue js 新手，我试图理解方法中使用 nextTick 的逻辑。所以我有两个这样的组件: IsTuruIslem.vue ... ... .
如果我有这样的代码: class SomeClass constructor: -> @someAttr = false someFunction: -> process.ne
我正在尝试测试我的应用程序在连续两次 tick 上发生的情况。这是我目前所拥有的(测试在 karma devtools 中失败，但在命令行中失败): import { mount } from 'av
我偶然发现了一个函数( here on SO )，它可以写入文件，但确保不会覆盖文件: function writeFile(i){ var i = i || 0; var fileN
我有一个 我有一个已安装的方法，可以在其中初始化 map 。 mounted(){ this.map = L.map(this.mapId, { preferCanvas: true }).setV
尝试递归调用同步函数来解析数组的元素；一旦到达数组的最后一个元素，就会调用回调。但是，当传递给 process.nextTick 时，回调被认为是未定义的，因为在与回调相同的范围内声明的另一个变量会打
我有一个 50k 条目的列表，我正在输入我的数据库。 var tickets = [new Ticket(), new Ticket(), ...]; // 50k of them tickets.f
下面的程序会在 NodeJS 中挂起，有人知道为什么吗？ ended = false;events = require('events');eventEmitter = new events.Even
Node.js 版本 0.10 今天发布，并引入了 setImmediate。 API changes文档建议在执行递归 nextTick 调用时使用它。 来自什么MDN says它看起来与proce
我应该多久或何时使用 process.nextTick ？ 我明白它的目的(主要是因为 this 和 this )。 根据经验，当我必须调用回调时，我总是使用它。这是一般方法还是还有其他方法？ 此外，
更新:事实证明这是一个非常愚蠢的问题。我只是没有注意到引用的示例中的一些简单的事情。 我一直在查看有关滴答声和事件循环的信息，大部分内容都很清楚，但 the nextTick documentatio
下面是“practise01.js”文件中的代码， function fn(name){ return f; function f(){ var n = name;
Node.js 0.10 版今天发布，引入了setImmediate。 API changes文档建议在进行递归 nextTick 调用时使用它。 来自MDN says它似乎与 process.nex
我读过 nextTick 允许在下一个操作中执行代码。但这在我的代码中不起作用，有人可以帮助我吗？请纠正我。谢谢。 .vue ..... methods:{ getUserInfo(){
使用 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/EventLoop 中的视觉表示: setImmediate() 和
我从人们那里得到的印象是...除非与 process.nextTick 一起使用，否则所有 JavaScript 函数都是同步的。什么时候使用它最好？ 我想确保我不会在不需要它的地方过度使用它。在这一
无论好坏，我们 stub process.nextTick 以同步调用它的第一个参数(回调)。看代码: global.test_clock = sinon.useFakeTimers(); sinon
我正在尝试测试此 site 中找到的 Yahoo API。但是，我可以获得“请求 token ”，但我似乎不知道如何继续，因为我的应用程序抛出 process.nextTick 错误 此外，如果可能的
我遇到了这个express.js路线，它是 small example in its official repo 的一部分，演示如何处理错误，看看: app.get('/next', function
我是一名优秀的程序员,十分优秀！