vue.nextTick()方法的使用详解

最新推荐文章于 2025-06-09 17:23:49 发布

sunlizhen

最新推荐文章于 2025-06-09 17:23:49 发布

阅读量450

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/sunlizhen/article/details/98955560

vue 专栏收录该内容

157 篇文章

订阅专栏

Vue.nextTick()用于在DOM更新后执行回调，适用于created钩子的DOM操作、数据变化后的DOM操作和第三方插件重应用。在数据改变后，DOM更新是异步的，Vue.nextTick确保在DOM更新完成后再执行指定的回调，避免操作旧的DOM。在created钩子中，由于DOM未渲染，DOM操作应放于Vue.nextTick中；当数据变更后需基于新DOM操作时，也需使用此方法；在DOM动态变化需要重新应用插件时，Vue.nextTick同样关键。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；

也就是数据发生改变后，DOM渲染还没有完成呢；数据发生变化后不能获取更新后的DOM，但是用vue.nextTick()就能获取更新后的DOM数据；获取更新后的DOM的Vue方法；当数据更新了，在dom中渲染后，自动执行该函数，

<template>
  <div class="wrapper">
    <p>过滤过的数组{{ list | capitalize }}</p>
    <div ref="oDiv">{{message}}</div>
    <button @click="newMessage">点击获取</button>
  </div>
</template>

<script>
import indexChild from './indexChild'
import One from './one'
import Two from './two'
import Three from './three'
export default {
  name: 'index',
  data () {
    return {
      show: true,
      list: [6, 5, 7, 10, 24, 13, 37, 30],
      message: '我是原始值'
    }
  },
  methods: {
    newMessage () {
      let that = this
      that.message = '我是修改后的值'
      console.log(this.$refs.oDiv.innerHTML) // 得到的是原始的值
      this.$nextTick(function () {
        console.log(that.$refs.oDiv.innerHTML) // 得到的是数据更新后的值
      })
    }
  },
  filters: {
  //  过滤器
    capitalize: function (value) {
      return value.filter(function (item) {
        return item % 2 === 0
      })
    }
  }
}
</script>

<style scoped>
  .wrapper{
    width: 300px;
    margin: 0 auto;
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
</style>

什么时候需要用的Vue.nextTick()？

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

created(){
let that=this;
that.$nextTick(function(){ //不使用this.$nextTick()方法会报错
that.$refs.oDiv.innerHTML="created中更改了按钮内容"; //写入到DOM元素
});
},

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

<template>
<div class="hello">
<h3 id="h">{{testMsg}}</h3>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
data () {
return {
testMsg:"原始值",
}
},
methods:{
let that=this;
that.testMsg="修改后的文本值"; //修改dom结构

that.$nextTick(function(){ //使用vue.$nextTick()方法可以dom数据更新后延迟执行
let domTxt=document.getElementById('h').innerText;
console.log(domTxt); //输出可以看到vue数据修改后并没有DOM没有立即更新，
if(domTxt==="原始值"){
console.log("文本data被修改后dom内容没立即更新");
}else {
console.log("文本data被修改后dom内容被马上更新了");
}
});
},

}
}
</script>

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

Vue.nextTick(callback) 使用原理：
原因是，Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。
当你设置 vm.someData = 'new value'，DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。