vue2 nextTick

### Vue2 中 `nextTick` 的使用方法

在 Vue2 中，`this.$nextTick()` 是一个非常有用的工具函数，用于等待 DOM 更新完成后再执行回调函数。当数据发生变化时，Vue 会批量处理这些更改并异步更新视图中的相应部分。

#### 基本语法

vm.$nextTick(callback);
// 或者作为 Promise 使用 (Vue 2.6.0+ 版本支持)
vm.$nextTick().then(() => {
    // 执行某些操作...
});

#### 实现原理概述
每当触发一次状态变更时，Vue 将其加入到队列中而不是立即渲染。等到下一个事件循环周期到来之际再统一进行实际的 DOM 操作。这样可以减少不必要的重绘/回流次数从而提高性能[^1]。

#### 应用实例展示

假设有一个简单的计数器组件，在点击按钮增加数值的同时希望获取最新的 DOM 结构：

<div id="app">
  <p>{{ count }}</p>
  <button @click="increment">Increment</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script type="text/javascript">
new Vue({
  el: '#app',
  data () {
    return {count: 0}
  },
  methods: {
    increment() {
      this.count += 1;
      
      // 此处直接读取 document.querySelector('p').textContent 可能得不到最新值
      
      this.$nextTick(function () {
        console.log(document.querySelector('p').textContent); // 输出 "1"
        
        /* 如果是在 Vue 2.6.0+ 上 */
        /*
          this.$nextTick().then(() => {
            console.log(document.querySelector('p').textContent); // 同样输出 "1"
          });
        */
      })
    }
  }
})
</script>

通过上述例子可以看到，只有当我们调用了 `this.$nextTick()` 并在其内部定义了要执行的操作之后，才能确保获得的是已经反映新数据的状态下的真实 DOM 节点信息[^2]。