vue源码nextTick使用及原理解析

Vue源码nextTick使用及原理解析

1. nextTick的使用

nextTick是Vue实例上的一个方法，该方法用于将回调函数延迟到下次 DOM 更新循环之后执行。Vue在更新 DOM 时是异步执行的，这意味着Vue并不能保证 immediate callback 将在 DOM 更新之后被调用，因为它们可能在同一个更新周期中触发。 而使用 nextTick 可以保证回调函数在 DOM 更新后被调用，因为每次更新之后，Vue将会把所有被推入 nextTick 队列的回调函数执行一遍。

在Vue实例中，可以通过this.$nextTick(callback)来调用nextTick方法，其中callback是要执行的回调函数。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    updateMessage: function () {
      this.message = 'Updated!'
      this.$nextTick(function () {
        // DOM 更新后执行的代码
        // ...
      })
    }
  }
})

2. nextTick的原理

在Vue中，nextTick的原理主要就是利用了浏览器的事件循环机制。具体来说，每当Vue需要更新DOM时，会先将渲染Watcher添加到观察者队列中，然后在观察者队列中的Watcher全部执行完毕后，才会执行nextTick队列中的回调函数。

nextTick队列的实现依赖于两个原生方法：Promise和MutationObserver。当浏览器支持Promise时，Vue会使用Promise来实现nextTick；否则，会使用MutationObserver。

Promise的实现

当浏览器支持Promise时，Vue的nextTick方法的实现如下所示：

/* 使用Promise的nextTick实现 */
Vue.prototype.$nextTick = function (fn: Function) {
  return fn ? promise.resolve().then(fn) : promise.resolve()
}

可以看到，该实现中使用Promise的then方法，将回调函数添加到Promise的微任务队列中，从而保证该回调函数在接下来的微任务执行阶段中被执行。

MutationObserver的实现

当浏览器不支持Promise时，Vue的nextTick方法的实现如下所示：

/* 使用MutationObserver的nextTick实现 */
Vue.prototype.$nextTick = function (fn: Function) {
  const observer = new MutationObserver(fn)
  const textNode = document.createTextNode(String(1))
  observer.observe(textNode, {
    characterData: true
  })
  textNode.data = String(2)
}

可以看到，该实现中利用了MutationObserver的原理。MutationObserver会在DOM发生变化时，触发回调函数。因此，Vue将回调函数添加到一个文本节点中，并在该节点的data属性上改变值，就可以触发回调函数了。

3. nextTick的示例

示例1：在使用v-for渲染数组后，获取渲染后的DOM节点

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    }
  },
  methods: {
    logNodes() {
      this.$nextTick(() => {
        const nodes = this.$el.querySelectorAll('li')
        console.log(nodes)
      })
    }
  },
  mounted() {
    this.logNodes()
  }
}
</script>

在该示例中，当组件挂载后，会执行logNodes方法，即在nextTick队列中添加一个回调函数，该回调函数会在DOM更新后执行。在回调函数中，我们可以获取到v-for循环渲染后的所有li节点，并将其打印到控制台中。

示例2：在使用v-show隐藏元素后，获取元素的高度

<template>
  <div>
    <h1 v-show="show">Hello, World!</h1>
    <button @click="logHeight">Get Height</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    logHeight() {
      this.show = true
      this.$nextTick(() => {
        const height = this.$el.querySelector('h1').offsetHeight
        console.log('Height:', height)
        this.show = false
      })
    }
  }
}
</script>

在该示例中，当点击按钮后执行logHeight方法。该方法首先将show属性设置为true，即显示h1元素，然后在nextTick队列中添加一个回调函数，该回调函数会在DOM更新后执行。在回调函数中，我们可以获取到h1元素的高度，并将其打印到控制台中。然后，将show属性设置为false，即隐藏h1元素。