vm.$nextTick

  • 参数： {Function} [callback]
  • 用法：将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
    实例：
<template>
  <div>
    <p ref="msgp">{{msg}}</p>
    <button @click="change">$nextTick</button>
  </div>
</template>

<script>
export default {
  name: 'nextTick',
  data() {
    return {
      msg: '未更新'
    }
  },
  methods: {
    change() {
      // 修改数据
      this.msg = '被更新了'
      // DOM还没有更新
      console.log(this.$refs.msgp.innerHTML)
      this.$nextTick(() => {
        // DOM更新了
        console.log('$nextTick:' + this.$refs.msgp.innerHTML)
      })
    }
  },
  created() {
  }
}
</script>

DOM 的更新是异步的，也就是在数据变化之后，DOM不会立即更新，而是进入队列，等同一时间循环中的所有数据变化完成之后，再统一进行视图更新。

结论：

vue 中的 DOM 更新是异步的

$nextTick() 的应用场景


在vue的生命周期 created() 钩子函数中进行 dom 操作，一定要放在 $nextTick() 函数中执行。在 created() 钩子函数执行的时候 DOM 其实并未进行任何渲染，而此时进行 DOM 操作无异于徒劳，所以此处一定要将 DOM 操作的代码放进 nextTick() 的回调函数中。

mounted() 钩子函数，因为该钩子函数执行时，所有的 DOM 挂载和 渲染都已完成，此时在该钩子函数中进行任何 DOM 操作都不会有问题

在数据变化后要执行某个操作，而这个操作需要随数据改变而改变DOM结构时，这个操作都是需要放置 $nextTick() 的回调函数中。