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()使用情景:
  1. created 和 mounted 阶段,如果需要操作渲染后的视图,要使用 nextTick 方法。因为mounted不会承诺其子组件也挂载完毕
  2. 通过v-show切换到输入框后,自动聚焦用得到。
  3. 点击获取某个元素的style样式时用得到
Logo

前往低代码交流专区

更多推荐