Vue中的this.$nextTick方法的使用 [前端][Vue框架]

本文链接：https://blog.csdn.net/m0_57001006/article/details/125816781

Vue中的this.$nextTick方法的使用

因为在vue中当组件的data中的数据发生了变化之后, 如果这个data中的数据与某个Dom元素有关, 那么这个时候这个Dom元素不会立即更新, vue会将更新Dom的操作缓存到一个事件模型中(也就是会将更新Dom的操作缓存到一个事件循环中)

缓存到事件循环里面可以避免多次计算和Dom的操作(比如: 重复点击等等), 所以也就是当数据(data)更新后, 并不会立刻重新渲染Dom, 而是等到事件队列清空之后才会去更新Dom
- 所以如果我们要在Dom渲染后的时机去做一些事, 我们就需要使用到this.$nextTick( callback )
  - this.nextTick( callback )中的回调函数(callback)会在Dom更新后被调用
    - callback就是回调的意思
事件模型是js中的一个概念, 也就是事件循环

注意: 当我们的事件队列清空之后就会去更新需要更新的DOM

举例理解:

—> 未使用this.$nextTick()时:

<template>
  <div id="app">
	  <p ref = "ref_p">{{msg}}</p>
	  <input :value = "msg" type="text" ref = "ref_i" />
	  <input @click="msgFn" type = "button" value = "按钮"/>
  </div>
</template>

<script>

export default {
  name: 'app',
  data(){
	  return {
		  msg : '飞飞学vue'
	  }
  },
  methods : {
	  msgFn(){
		  this.msg = '哈哈哈哈哈哈';
		  console.log(this.$refs['ref_p'].innerHTML);
		  console.log(this.$refs.ref_i.value);
	  }  
  },
  components: {
  }
}
</script>

<style>
</style>

这个时候我们能发现当我们第一次点击按钮时, 我们的数据模型msg会更新为**“哈哈哈哈哈”, 这个时候我们的msg是作为我们的p标签的标签体的, 这个时候我们在点击按钮触发的点击事件之后在点击了按钮更新了msg数据模型值之后使用this.$refs[“ref属性”].innerHTML的方式获取到了对应的上面p标签对应Dom元素的标签体数据, 这个时候我们可以发现我们的p标签的Dom元素的标签体数据还是"飞飞学vue", —> 这个是因为我们的Dom其实还没有更新, 只是更新了数据模型, 但是其实这个时候p标签对应的内存中的DOM元素还没有更新, 我们获取p元素DOM的标签体内容时就会得到滞后的’飞飞学vue’**
- 这个时候我们可以发现我们的视图已经是更新为了**‘哈哈哈哈哈’, 这个其实是因为我们的视图是在DOM元素更新完成之后立刻变化为了"哈哈哈哈哈"**, 看起来就会是我们的视图是变化了, 但是我们的DOM数据还没有更新, 但其实是数据没有更新的时候我们就去求对应的DOM元素的数据了, 而在数据更新之后视图才发生了变化

—> 使用this.$nextTick()

<template>
  <div id="app">
	  <p ref = "ref_p">{{msg}}</p>
	  <input :value = "msg" type="text" ref = "ref_i" />
	  <input @click="msgFn" type = "button" value = "按钮"/>
  </div>
</template>

<script>

export default {
  name: 'app',
  data(){
	  return {
		  msg : '飞飞学vue'
	  }
  },
  methods : {
	  msgFn(){
		  this.msg = '哈哈哈哈哈哈';
		  
		  this.$nextTick(() => {
			  console.log(this.$refs['ref_p'].innerHTML);
			  console.log(this.$refs.ref_i.value);
		  });
	  }  
  },
  components: {
  }
}
</script>

<style>
</style>

这个时候一旦点击按钮之后执行msgFn()时, 将this.msg数据模型修改之后, 我们是在this. $n e x tT i c k () 的回调中执行的获取对应的 D OM 元素并且获取 D OM 中的对应数据模型绑定的属性值, 因为我们的 t hi s .$ nextTick()的回调是在DOM元素更新之后调用的, 所以会获取到更新之后的最新值