最后
为了帮助大家更好的了解前端,特别整理了《前端工程师面试手册》电子稿文件。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
})
// 2.1.0新增 Promise用法
Vue.nextTick()
.then(function () {
// 此时DOM已经更新
})
2.1.0 起新增:如果没有提供回调且在支持 Promise 的环境中,则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill,所以如果你的目标浏览器不原生支持 Promise (IE:你们都看我干嘛),你得自己提供 polyfill
DOM循环更新
首先,Vue实例实现响应式并不是在数据改变之后就立即更新DOM,而是在一次循环的所有数据变化后再异步执行DOM更新
在这里简单总结一下事件循环
同步代码执行=>查找异步队列,进入执行栈,执行Callback1[事件循环1]=>查找异步队列,进入执行栈,执行Callback[事件循环2]=>…
即每一次异步的Callback都会再独立形成一次事件循环
因此我们可以推出nextTick的触发机制
一次循环种的所有代码执行完毕 = > DOM更新 = > 触发nextTick的回调Callback = > 进入下一次循环
下面来个例子,帮助更好的理解nextTick机制
打开网页后,我们可以发现结果为:
After NextTick
在nextTick执行前获取内容:Before NextTick
在nextTick执行之后获取内容:After NextTick
最后
为了帮助大家更好的了解前端,特别整理了《前端工程师面试手册》电子稿文件。