Vue中this.$nextTick()实现原理及使用场景学习总结
this.$nextTick()原理:Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。...
·
this.$nextTick()原理:
- Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。
- Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。
- 首先修改数据,这是同步任务。同一事件循环的所有的同步任务都在主线程上执行,形成一个执行栈,此时还未涉及 DOM 。
- 然后Vue 开启一个异步队列,并缓冲在此事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。
vue的降级策略(兼容)
promise -> MutationObserver ->(macro-task) setTimeout
创建一个新的任务,优先使用 Promise,如果浏览器不支持,再尝试 MutationObserver。又不支持,只能用 setTimeout 创建 task 了。
MutationObserver 是 h5 新加的一个功能,其功能是监听dom节点的变动,在所有 dom 变动完成后,执行回调函数。
具体有下面几点变动的监听:
childList:子元素的变动
attributes:属性的变动
characterData:节点内容或节点文本的变动
subtree:所有下属节点(包括子节点和子节点的子节点)的变动
this.$nextTick()使用情景:
- created 和 mounted 阶段,如果需要操作渲染后的视图,要使用 nextTick 方法。因为mounted不会承诺其子组件也挂载完毕
- 通过v-show切换到输入框后,自动聚焦用得到。
- 点击获取某个元素的style样式时用得到
更多推荐
已为社区贡献3条内容
所有评论(0)