浅谈我对vue.nextTick()方法的理解

本文来自我的小伙伴小帅，从JS基础出发一起学习JS，全网首发

今天我来谈一谈我对 vue.nextTick() 方法的理解，这是一个在面试会被经常问到的问题，会问到起原理和理解还有适用场景。

在vue项目中，vue.nextTick() 方法还是蛮常见的，因为很多场景需要用到这个方法，比如页面初始化加载的时候，你需要获取元素的高度，但是这个元素又是通过接口数据渲染的，如果直接获取那肯定获取到的高度是元素还没加载以前的高度，要想获取到实际加载数据以后的值那可以用 vue.nextTick() 方法。

我们看一下他的作用：

就是在下一次DOM更新循环结束之后执行延迟回调，在修改数据以后立即使用这个方法，获取更新后的DOM。

举个栗子

<template>
  <div ref="div">{{testMsg}}</div>
</template>
<script>
export default {
  data () {
    return {
      testMsg:"原始值"
    }
  },
  mounted() {
    this.testMsg = '修改以后的值'
    console.log('直接修改打印-----'+this.$refs.div.innerHTML)
  }
}

通过打印得到

直接修改打印-----原始值

可以看出直接修改数据以后再打印DOM值，是不能及时获取到更新以后的值的。

接下来我们用 this.nextTick() 方法试试

<template>
  <div ref="div">{{testMsg}}</div>
</template>
<script>
export default {
  data () {
    return {
      testMsg:"原始值"
    }
  },
  mounted() {
    this.testMsg = '修改以后的值'
    console.log('直接修改打印-----'+this.$refs.div.innerHTML)
    this.$nextTick(() => {
    console.log('this.$nextTick方法以后的打印-----'+this.$refs.div.innerHTML)
    })
  }
}

通过打印得到

直接修改打印-----原始值
this.$nextTick方法以后的打印-----修改以后的值

用了 this.nextTick() 方法以后是可以获取到更新以后的DOM值的，这是为啥呢，我们先看一下官方是怎么说的

this.$nextTick()的原理官方解释：

Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。

简单理解

因为vue实现响应式并不是在数据变化以后DOM就立即变化的，而是按照一定的策略来进行DOM更新的，this.$nextTick() 方法是在下次DOM更新循环结束以后执行延迟回调，所以在 this.$nextTick() 方法里面能获取到更新后的DOM。

这里提示一下，因为我的例子是写在 mounted 钩子函数里面的，在vue生命周期的 created() 钩子函数进行DOM操作的时候一定要放在 this.$nextTick() 方法里面，因为在created()钩子函数里面执行DOM 的时候其实并未进行任何渲染，而此时进行DOM渲染是没有效果的，与之对应的是 mounted() 钩子函数，因为在这个钩子函数时，所有的DOM挂载和渲染已完成，所以不会有问题。

今天的分享就到这里了，如果有错误的地方请指出，我们一起学习进步！

如果对你有帮助，可以转发/收藏，点个赞给个支持一下吧~