vue通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM。Vue的dom更新是异步的，当数据发生变化，vue并不是里面去更新dom，而是开启一个队列。跟JavaScript原生的同步任务和异步任务相同。
比如我们调用一个方法，同时涉及多个数据的操作改变，vue会把这一些列操作推入到一个队列中，相当于JavaScript的同步任务，在执行过程中可能会出现一些产生任务队列的异步任务，比如定时器、回调等。
在vue里面任务队列也叫事件循环队列。我们都知道JavaScript是循环往复的执行任务队列。Vue也一样，在一个同步任务过程中是不会去更新渲染视图，而是在同步任务（事件循环队列）执行完毕之后，在主线程的同步执行完毕，读取任务队列时更新视图。
这个机制对于页面性能是非常重要的，试想一下，我们要是每操作一个数据就更新一次视图，那么在性能上会非常差。而如果是在一次任务执行完毕之后更新视图，可以避免特别多的重复操作。
在开发过程中，我们很容易遇见需要先渲染数据然后操作dom，这时候就要使用vue提供的nextTick函数。
对于这个函数有这样两句话：
Vue.nextTick(callback)，当数据发生变化，更新后执行回调。
Vue.$nextTick(callback)，当dom发生变化，更新后执行的回调。
我测试了很多例子，最后还是只实现了dom的变化，对于第一句没有实现：
<p id="msg">{{msg}}</p>
<button @click="add">加</button>
add(){
this.msg = 'have';
console.log(document.getElementById('msg').innerHTML);
this.$nextTick(() => {
console.log(document.getElementById('msg').innerHTML);
});
}
第一个输出no,在nextTick函数里面输出have。
这个函数就是有了数据之后，渲染完成之后会执行，也就是说当你需要数据先渲染，然后去操作渲染完成之后的dom，要把操作dom的逻辑写在这个函数里面。
最后分享两个术语：macro-task和micro-task，也就是主线程和能产生子线程的函数。
macro-task:script(script标签里面的整体代码) setTimeout、setInterval、setImmediate、I/O、UI rendering。
micro-task:process.nextTick,Promise,MutationObserver。
欢迎关注Coding个人笔记 公众号
网友评论