vue源码问题

最近在看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
}
阅读 1.6k
1 个回答

作为一个菜鸡..瞎扯点自己的想法吧...不对就不对了...坐等后面大神指教...

第一个的话 我觉得是为了性能考虑吧...虽然我不知道callbacks这个值哪来的...我感觉这么写的目的是把callbacks置空之后销毁掉避免占用copies自己内部使用后也就自己销毁了...

第二个的话MutationObserver本身就是一个HTML方法...observe使用characterData这个属性的时候并不会监听node的插入删除 只会监听数据的改变所以这里应该只是为了处理下面textNode.data的数据变动服务的...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题