详解Vue中的nextTick

　　Vue中的nextTick涉及到Vue中DOM的异步更新，感觉很有意思，特意了解了一下。其中关于nextTick的源码涉及到不少知识，很多不太理解，暂且根据自己的一些感悟介绍下nextTick。 一、示例 　　先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用。 　　点击后： 　　接下来，了解nextTickHandler()函数。 　　这个函数就是$nextTick内实际调用的函数。 　　接下来，是vue分了三种情况来延迟调用以上这个函数，因为$nextTick目的就是把传进来的函数延迟到dom更新后再使用，所以这里依次优雅降序的使用js的方法来做到这一点。 　　1、先判断是否原生支持promise，如果支持，则利用promise来触发执行回调函数； 　　如果浏览器支持Promise，那么就用Promise.then的方式来延迟函数调用，Promise.then方法可以将函数延迟到当前函数调用栈最末端，也就是函数调用栈最后调用该函数。从而做到延迟。 　　2、否则，如果支持MutationObserver，则实例化一个观察者对象，观察文本节点发生变化时，触发执行所有回调函数。 　　MutationObserver是h5新加的一个功能，其功能是监听dom节点的变动，在所有dom变动完成后，执行回调函数。 　　具体有以下几点变动的监听 childList：子元素的变动 attributes：属性的变动 characterData：节点内容或节点文本的变动 subtree：所有下属节点（包括子节点和子节点的子节点）的变动 　　可以看出，以上代码是创建了一个文本节点，来改变文本节点的内容来触发的变动，因为我们在数据模型更新后，将会引起dom节点重新渲染，所以，我们加了这样一个变动监听，用一个文本节点的变动触发监听，等所有dom渲染完后，执行函数，达到我们延迟的效果。 　　3、如果都不支持，则利用setTimeout设置延时为0 　　利用setTimeout的延迟原理，setTimeout(func, 0)会将func函数延迟到下一次函数调用栈的开始，也就是当前函数执行完毕后再执行该函数，因此完成了延迟功能。 　　最后是queueNextTick函数。因为nextTick是一个即时函数，所以queueNextTick函数是返回的函数，接受用户传入的参数，用来往callbacks里存入回调函数。 　　这个return的函数就是我们实际使用的闭包函数，每一次添加函数，都会想callbacks这个函数数组入栈。然后监听当前是否正在执行，如果没有，执行函数。这个很好理解。下面一个if是promise化。 　　以上代码中第二种写法我们不常见把，直接调用$nextTick函数然后用promise格式去书写代码，不过这个then里面需要手动绑定this，vue内部没有给做处理。 　　这就是一个this.$nextTick的实现，其中利用了优雅降序的巧妙手法，使代码尽可能优化。而且还提供了promise的写法，虽然我们不经常用，但是有总比没有好。