Vue-$nextTick

最新推荐文章于 2025-12-08 11:36:54 发布

原创最新推荐文章于 2025-12-08 11:36:54 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js

vue 专栏收录该内容

2 篇文章

订阅专栏

本文详细讲解了Vue中的$nextTick方法如何确保数据变更后DOM及时更新，并通过实例展示了在Vue组件中使用$nextTick解决延迟渲染问题的方法。重点介绍了在Vue生命周期中正确使用$nextTick的场景和注意事项。

$nextTick

官方文档

vm.$nextTick( callback ) callback Function 延迟回调的执行直到下一次 DOM
更新循环结束。当你改变一些数据之后调用它，当回调触发时 DOM 已经更新完毕。这和全局的 Vue.nextTick 效果相同，只是回调的
this 上下文会自动指向调用此方法的实例。

开发中遇到的问题
当你改变vue中某一组件内数值时、该组件不会立即重新渲染，而是加入事件循环队列，待事件循环队列执行当前时间时开始渲染，而如果你想在DOM更新后做一些操作，就需要使用$nextTick,
否则会发生下面的情况

  <div id="app">
	<div ref="Div1">{{msg}}</div>
	<div v-if="Div2">{{Div2}}</div>
	<div v-if="Div3">{{Div3}}</div>
	<input type="button" value="change" @click="changeDiv"/>
  </div>

  data(){
	  return{
		   msg: '渲染前',
		   Div2:"",
		   Div3:""
	  }  
  },
  methods:{
	  changeDiv(){
		  this.msg = "渲染后"
		  //不使用用nextTick方法直接拿到fDiv的内容会拿到渲染之前的信息
		  //Div2被赋值为渲染前
		  this.Div2=this.$refs.Div1.innerHTML
		  //Div3被赋值为渲染后
		  this.$nextTick(() => {
        this.Div3 = this.$refs.Div1.innerHTML
      })
	  }
  }