一文学会什么是vue.nextTick()

什么是vue.nextTick()

vue.nextTick()是Vue.js的一个方法，它的作用是在修改数据之后等待DOM更新完毕后执行回调函数。在有些情况下，当我们修改了某个数据后需要对DOM进行操作（比如获取某个元素的高度），此时DOM可能还没有更新完毕，这就需要加入一个异步任务，等待DOM更新完毕后再执行相应操作，vue.nextTick()正是解决这类问题的。

如何使用nextTick()

vue.nextTick()可以使用回调函数的方式或Promise的方式来使用:

回调函数方式

Vue.nextTick(function () {
  // DOM 更新完毕后执行的回调函数
})

Promise方式

Vue.nextTick().then(function () {
  // DOM 更新完毕后执行的回调函数
})

nextTick()的使用示例

示例1：获取某个元素的高度

<template>
  <div>
    <p ref="message">Hello World</p>
    <button @click="getMessageHeight">获取高度</button>
  </div>
</template>

<script>
export default {
  methods: {
    getMessageHeight() {
      this.$nextTick(function () {
        let height = this.$refs.message.offsetHeight
        console.log('message的高度是：', height)
      })
    }
  }
}
</script>

在这个例子中，我们通过ref获取到了p元素节点，并且添加了一个点击事件，在点击按钮后通过this.$nextTick()来获取p元素的高度。

示例2：在表格中添加新数据行

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in userList" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>
            <button @click="deleteUser(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <button @click="addUser">新增用户</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [{
        id: 1,
        name: '张三',
        age: 25
      }, {
        id: 2,
        name: '李四',
        age: 30
      }]
    }
  },
  methods: {
    addUser() {
      let newUser = {
        id: this.userList.length + 1,
        name: '新用户',
        age: 18
      }
      this.userList.push(newUser)

      // 因为DOM更新是异步的，为了确保Vue已经更新了DOM，需要加上$nextTick
      this.$nextTick(function () {
        let lastIndex = this.userList.length - 1
        let lastRow = this.$el.querySelector(`#row-${lastIndex}`)
        lastRow.scrollIntoView({ behavior: 'smooth' })
      })
    },
    deleteUser(index) {
      this.userList.splice(index, 1)
    }
  }
}
</script>

在这个例子中，我们添加了一个按钮，点击按钮后会向表格中添加一行新的数据。因为DOM更新是异步的，如果没有使用this.$nextTick()就会导致获取到的lastRow为undefined或者为上一次添加的行，这显然不是我们想要的结果，加上this.$nextTick()后就可以保证DOM已经更新完毕了，这时再获取lastRow就没有问题了。