vue.nextTick()方法

什么是Vue.nextTick()？？

含义：

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

因此就衍生出了这个获取更新后的DOM的Vue方法。

所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；

个人理解：

nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数。

废话不多说，直接上代码

<template>
  <div class="main">
    <div>
      <button id="button" @click="test()" ref="buttonRef">{
    
    {userName}}</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'main',
  data() {
    return {
      userName: '张三'
    }
  },
  methods: {
    test() {
      let that = this
      that.userName = '李四'
      console.log(that.$refs.buttonRef.innerText) //that.$refs.buttonRef获取指定DOM，输出：张三
    }
  }
}
</script>

在使用this.$nextTick()

  methods: {
    test() {
      let that = this
      that.userName = '李四'
      that.$nextTick(function () {
        console.log(that.$refs.buttonRef.innerText) //输出：李四
      })
    }
  }

注意：Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。

什么时候使用Vue.nextTick()？？

Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。

当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它

在使用某个第三方插件时，希望在vue生成的某些dom动态发生变化时重新应用该插件，也会用到该方法，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法。

什么是Vue.nextTick()？？

什么时候使用Vue.nextTick()？？

猜你喜欢