最近在看vue源码,其中有2个比较细节的问题,想知道这里的答案
vue源码版本
算比较新的源码,具体版本我也不知道?
文件路径
src/core/util/next-tick.js
2个问题都在next-tick文件中
具体问题
1.这里为什么要使用copies这个数组来替换callbacks,以及为啥要在这里置空callbacks?
function flushCallbacks () {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}
2.这里mutaionObserver我是看懂了,但这里创建了textNode,但未添加到Dom中去,如何做到监听的?或者说是在其他地方添加了,方便告知下吗?
// 省略上面的Promise
else if (!isIE && typeof MutationObserver !== 'undefined' && (
isNative(MutationObserver) ||
// PhantomJS and iOS 7.x
MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
// Use MutationObserver where native Promise is not available,
// e.g. PhantomJS, iOS7, Android 4.4
// (#6466 MutationObserver is unreliable in IE11)
// MutationObserver 可用
let counter = 1
const observer = new MutationObserver(flushCallbacks)
const textNode = document.createTextNode(String(counter))
observer.observe(textNode, {
characterData: true
})
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
isUsingMicroTask = true
}
作为一个菜鸡..瞎扯点自己的想法吧...不对就不对了...坐等后面大神指教...
第一个的话 我觉得是为了性能考虑吧...虽然我不知道callbacks这个值哪来的...我感觉这么写的目的是把callbacks置空之后销毁掉避免占用copies自己内部使用后也就自己销毁了...
第二个的话MutationObserver本身就是一个HTML方法...observe使用characterData这个属性的时候并不会监听node的插入删除 只会监听数据的改变所以这里应该只是为了处理下面textNode.data的数据变动服务的...