文章您的位置：主页 > 产品展示 >

Vue中如何使用MutationObserver做批量处理


2019-11-26 06:50:21
• 更新一下，现在Vue的nextTick实现移除了MutationObserver的方式（兼容性原因），取而代之的是使用MessageChannel。JakeArchibald有一篇介绍task和microtask的文章，可以了解一下：Tasks,microtasks,queuesandschedulesJS的eventloop执行时会区分task和microtask，引擎在每个task执行完毕，从队列中取下一个task来执行之前，会先执行完所有microtask队列中的microtask。setTimeout回调会被分配到一个新的task中执行，而Promise的resolver、MutationObserver的回调都会被安排到一个新的microtask中执行，会比setTimeout产生的task先执行。要创建一个新的microtask，优先使用Promise，如果浏览器不支持，再尝试MutationObserver。实在不行，只能用setTimeout创建task了。为啥要用microtask？根据HTMLStandard，在每个task运行完以后，UI都会重渲染，那么在microtask中就完成数据更新，当前task结束就可以得到最新的UI了。反之如果新建一个task来做数据更新，那么渲染就会进行两次。（当然，浏览器实现有不少不一致的地方，上面Jake那篇文章里已经有提到。）至于MutationObserver如何模拟nextTick这点，直接看源码，其实就是创建一个TextNode并监听内容变化，然后要nextTick的时候去改一下这个节点的文本内容：varcounter=1varobserver=newMutationObserver(nextTickHandler)vartextNode=document.createTextNode(String(counter))observer.observe(textNode,{characterData:true})timerFunc=()=>{counter=(counter+1)%2textNode.data=String(counter)}

• 上一条：上一篇：版权和专利的存在对整个人类社会发展是利大于弊还是弊大于利
• 下一条：下一篇：变速箱增加一档制造难度和结构设计难度增加多少