【Vue原理】NextTick-源码版之服务Vue 写文章不容易，点个赞呗兄弟专注Vue源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于Vue版本【2.5.17】如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧【Vue原理】NextTick-源码版之服务Vue初次看的兄弟可以先看【Vue原理】NextTick-白话版简单了解下NextTick好的，今天，就来详细记录Vue和nextTick的那些事公众号nextTick在Vue中，最重要的就是~~~协助Vue进行更新操作!上篇文章NextTick-源码版之独立自身提到过，nextTick帮助Vue避免频繁的更新，这里简单提一下，每次修改数据，都会触发数据的依赖更新也就是说数据被修改的时候，会调用一遍【引用这个数据的实例】的更新函数那么，按道理来说，修改3次，就应该调用3遍更新函数，但是实际上只会调用一遍比如我们使用watch监听data（data便收集了watch的watcher，监听回调就是更新函数）公众号结果就是只打印一次公众号至于依赖更新，可以看下面的文章依赖更新-源码版其实，修改数据能够只更新一次，不止是nextTick起了作用，Vue也做了其他处理，比如过滤实例，清空队列等等，下面就来说一下一切先从【实例更新函数】开始第一个要说的就是watcher！每个实例都有一个watcher，然后watcher保存着实例的更新函数每个实例都会通过newVue生成的，所以会有一个专属的watcher更新函数被保存在watcher.getter上functionVue(){....newWatcher(vm,实例更新函数)}functionWatcher(vm,expOrFn){this.getter=expOrFn;};Watcher.prototype.get=function(){this.getter.call(vm,vm);};Watcher.prototype.update=function(){queueWatcher(this);};Watcher.prototype.run=function(){this.get();};我们知道，Vue的data是响应式的，就是通过Object.defineProperty设置get和set当数据被修改的时候，set函数被触发，函数内部会通知所有的实例进行更新（就是调用每个实例的watcher.update方法）具体可以看这个响应式原理-白话版依赖更新-源码版那么我们现在的重点就在watcher.update上了，看看上面的Watcher代码出现了一个queueWatcher的东西公众号更新队列速度看源码！varqueue=[];varhas={};varindex=0;varflushing=false;varwaiting=false;functionqueueWatcher(watcher){varid=watcher.id;//如果是同一个Vue实例，就不要重复添加了if(has[id]==null){//这个实例已经被标记了has[id]=true;//如果没有在运行，那么直接放入队列if(!flushing){queue.push(watcher);}else{//ifalreadyflushing,splicethewatcherbasedonitsid//ifalreadypastitsid,itwillberunnextimmediately.vari=queue.length-1;//跳过所有比我大的while(i>index&&queue[i].id>watcher.id){i--;}//最后放在队列中，一个比我老的watcher后面queue.splice(i+1,0,watcher);}//在flushSchedulerQueue执行之后设置为falseif(!waiting){waiting=true;nextTick(flushSchedulerQueue);}}}先说说其中涉及的几个变量公众号has是一个对象，用来过滤watcher。当这个watcher已经调用过更新函数，那么就在has中标记这个id也就是，你同时间调用多次watcher.update，其实只有第一次调用有用，后面的都会被过滤掉queue一个数组，watcher更新队列，存放需要更新的watcherflushSchedulerQueuewatcher更新队列执行函数，下面有讲到waiting为true表示已经把【watcher更新队列执行函数】注册到宏微任务上了（或者说存放进callbacks中）。正在等待JS栈为空后，就可以执行更新。直到所有watcher更新完毕，才重置为falseflushing为true表示watcher更新队列正在执行更新（就是开始遍历watcher队列，逐个调用watcher更新了）直到所有watcher更新完毕，才重置为falsequeueWatcher源码不算很复杂，主要做两件事1、处理watcher更新队列queue2、注册【watcher更新队列执行函数】进宏微任务处理watcher更新队列queue当flushing为false时，表示queue还没有开始遍历执行，直接push当flushing为true，表示queue已经开始遍历，执行其中的watcher更新了然后，做了一个很特殊的插入操作（为了方便看，把上面的源码截取了）公众号我还是没有看懂这是为什么?直到我看到了flushSchedulerQueue的源码！因为在flushSchedulerQueue执行的时候（此时设置了flushing=true），内部把queue升序排列了!所以在flushing的时候，queue已经是有序状态，中途进来的watcher，当然也要按顺序来所以，这一段的作用就是给新来的watcher排序！其中index表示现在正遍历到第几个watcher（在flushSchedulerQueue中设置）所以，也必然是排到已经执行过的watcher后面的（不然就遍历不到这个watcher了啊）注册【watcher更新队列执行函数】进宏微任务已经讲到flushSchedulerQueue了，他就是注册宏微任务的异步回调公众号直接存放进异步任务队列callbacks中的关于nextTick的异步任务队列，可以看NextTick-源码版之独立自身接下来，就看flushSchedulerQueue执行更新队列functionflushSchedulerQueue(){flushing=true;varwatcher;//升序排列queue.sort(function(a,b){returna.id-b.id;});for(index=0;index
本文档为【Vue原理NextTick-源码版之服务Vue】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，
图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。
该文档来自用户分享，如有侵权行为请发邮件ishare@vip.sina.com联系网站客服，我们会及时删除。
[版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件isharekefu@iask.cn，我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
浙公网安备 33021202002483