Vue中this.$nextTick()实现原理及使用场景学习总结

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样式时用得到