Vue $nextTick理解和实现原理

简介: Vue $nextTick理解和实现原理

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM  


                  Vue的更新DOM机制:Vue在内部维护了一个虚拟DOM,当我们进行常规的DOM操作后,并不是立即更新真实DOM树,而是被Vue记录在了内部的虚拟DOM上,然后再统一更新,这个统一更新的操作是异步的,在Vue内部维护了一个任务队列,所以我们修改完DOM值之后不会立即输出修改后的DOM值,是因为这个DOM更新的操作被Vue记录了下来统一保存到了虚拟DOM中然后存放到更新任务队列中 等待更新


       而Vue为我们提供了全局API $nextTick 它支持传入一个回调函数,只有当Vue的DOM操作更新结束后,才会去执行这个回调函数,所以在$nextTick的回调函数中可以准确的获取到修改后的DOM值

相关文章
|
2天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
|
2天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
6天前
|
JavaScript 索引
Vue 2和Vue 3的区别以及实现原理
Vue 2 的响应式系统通过Object.defineProperty来实现,它为对象的每个属性添加 getter 和 setter,以便追踪依赖并响应数据变化。
22 9
|
2天前
|
JavaScript
vue中watch的用法
vue中watch的用法
|
6天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
7天前
|
缓存 JavaScript
vue学习(12)计算属性
vue学习(12)计算属性
20 2
|
6天前
|
JavaScript
Vue组件传值异步问题--子组件拿到数据较慢
Vue组件传值异步问题--子组件拿到数据较慢
10 0
|
6天前
|
缓存 JavaScript
Vue中的keep-alive是什么意思?以及如何使用
Vue中的keep-alive是什么意思?以及如何使用
|
JavaScript 前端开发 缓存
|
9天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
42 11