Vue nextTick学习笔记

最近做了个一个小功能：打开dialog后，光标能focus在输入框里。实现时小折腾了一会儿，不过正巧就借着机会介绍一下vue的一个知识点——nextTick。

dialog

focus

先从这个demo讲起。内容很简单，就是一个vuetify的dialog，点击该DIALOG按钮后，就会有个输入框。目标是让光标停留在这个输入框里。

    
        DIALOG
        
          
              Simple Form
          

          
        
    

刚开始我的想法很naive：watch一下show值，如果是true就调用focus()方法。

new Vue({
  el: '#app',
  data () {
    return {
      show: false,
    }
  },
  watch: {
    show(val) {
      if (!val) return;

      this.$refs.txt.focus();
    },
  }
})

但这并没有什么用。

failed

OK，debug一下。当断点打在this.$refs.txt.focus()上时，我发现整个dialog内容是dispaly:none。复习一下dispaly:none，它是不渲染页面流的。也就是说，我试图将光标focus在一个未被渲染的输入框中。这必然是失败。

Vue开发者文档

至于为什么会这样，我们看看Vue开发者文档。这里提到了异步更新队列：

Vue异步执行DOM更新

当观察到数据变化后，Vue将开启一个队列，缓冲所有在同一事件循环中发生的数据改变。缓冲策略的好处就是去重，这就避免了同一个DOM重复的数据计算。

上文的例子中，当show被置为true后，组件并没有被立即渲染，而是被放到了下一个‘tick’中更新。这就是打断点后整个dialog依旧是dispaly:none的原因了。那怎么解决这个问题呢？文档里提到了Vue.nextTick(callback)。稍作修改，效果立马显现。

new Vue({
  ...
  watch: {
    show(val) {
      if (!val) return;
      // Dialog haven't been rendered
      this.$nextTick( () => {
        // Dialog DOM rendering finishes
        this.$refs.txt.focus();
      });
    },
  }
})

success

nextTick

当然，使用Vue API，假若知其然不知其所以然，并不能给我们带来太大帮助。我们还是得看看原理的：Vue实现响应式并不是数据变化后立即更新DOM的，而是根据一定策略在下一个时间点（next tick）里响应DOM变化。具体怎么实现，有兴趣的小伙伴可以看一下vue源码Watcher这一块的update方式。有点复杂我这里就不深入讲解了。

不过，所有的实现最终依靠的是src/core/util/next-tick.js这个文件里的函数——nextTick。内容不多，加上大段的注释也就100来行。我摘抄了核心部分——timerFunc实现：

const callbacks = []
let pending = false

function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

let timerFunc // core function

if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks)
  }
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  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)
  }
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {

  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  // Fallback to setTimeout.
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

有点长，但是代码还挺容易看懂的，主要工作就是根据浏览器的兼容情况选择timerFunc的不同实现方法。timerFunc作为nextTick的核心模块，说白了，主要功能就是将回调函数延迟到下一个tick执行： 默认是Promise实现的，在IE里用的是MutationObserver，对那些更古老的浏览器，就用setImmediate或是setTime实现。从timerFunc可以看得出，vue团队主要精力还是在兼容各种版本的浏览器上。（汗）

Anyway，我们一般的开发也就兼容到IE为止了，所以Vue2的最终版将nextTick定性为了microtasks（我在以前的博客介绍过microtask和macrotask）。Microtask的好处是可以绕开一些事件操作的诡异行为，坏处就是会影响到冒泡和一些顺序执行的操作。我记得对nextTick的实现，Vue团队在microtask和macrotask之间反反复复了好几回，其中的tradeoff可见一斑。

nextTick最后部分是函数本体的实现，我们把上面timefunc部分精简一下放到一起：

const callbacks = []
let pending = false

function flushCallbacks () {
  pending = false
  callbacks.forEach( cb => cb() )
}

let timerFunc = () => {
    Promise.resolve().then(flushCallbacks)
}

function nextTick (cb, ctx) {
    let _resolve
    callbacks.push(() => {
       cb ? cb.call(ctx) : _resolve(ctx)
    })

    if (!pending) {
        pending = true
        timerFunc()
    }

    if (!cb) {
        return new Promise((resolve) => {
            _resolve = resolve
        })
    }
}

如上所示，调用nextTick时，既可以传入回调函数，又可以Promise化。前者是将所有回调压入callbacks数组，最后在下一个microTask（Promise.resolve().then）里执行flushCallbacks操作；后者是当_resolve函数执行（在flushCallbacks同一个microTask里），等再下一个microTask里执行then逻辑操作。我们试一下最后的Demo：

nextTick().then( () => {
    console.log('Onion')
})

nextTick(() => {
    console.log('Hello')
})

nextTick().then( () => {
    console.log('Garlic')
})

nextTick(() => {
    console.log('World')
})

输出如下，正如预期一样，Hello和World在第一个microTask里，Onion和Garlic在接下来的两个microTask里。

Hello
World
Onion
Garlic

总结

今天借着某个常见的需求介绍了一下vue nextTick的知识。我们了解到数据变化到DOM渲染是一个异步过程，发生在不同的tick里。虽然Vue.js通常鼓励开发人员沿着“数据驱动”的方式实现代码，尽量避免直接接触DOM。但是有时候不得不操作DOM，我们可以在数据变化后立即使用vm.nextTick(cb)，这样回调函数会在DOM更新后执行。