Vue.$nextTick

官方对其的定义

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

我们可以理解成，Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新。这意味着，如果你尝试在数据变化后立即获取某些 DOM 元素的状态，可能会得到旧的状态，因为 DOM 更新可能还没有完成。

Vue.$nextTick() 方法允许你延迟执行代码，确保它将在 DOM 更新之后运行，从而避免访问或操作未更新的 DOM 元素。这在你需要访问或操作更新后的 DOM 元素时非常有用。

数据在发现变化的时候，Vue并不会立刻去更新Dom，而是将修改数据的操作放在了一个异步操作队列中
等待同一事件循环中的所有数据变化完成之后，会将队列中的事件拿来进行处理，进行DOM的更新
nextTick属于微任务
同步代码执行 -> 查找异步队列，推入执行栈，执行[事件循环1] ->查找异步队列，推入执行栈，执行[事件循环2]…
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，

在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM,示例如下：

<template>
	<div class="nextTick">
		<div ref="msgDiv">{{msg}}</div>
		<button @click="changeMsg">
			Change the Message
		</button>
	</div>
</template>

<script type="text/ecmascript-6">
export default {
    name: "nextTick",
    data() {
        return {
            msg: "Hello Vue."
        };
    },
    methods: {
        changeMsg() {
            this.msg = "Hello World.";
            setTimeout(() => { // 属于宏任务
                console.log(this.$refs.msgDiv.innerHTML); // Hello World.
            }, 0);
            
            this.$nextTick(() => { // 属于微任务
                console.log(this.$refs.msgDiv.innerHTML); // Hello World.
            });
            
            console.log(this.$refs.msgDiv.innerHTML); // Hello Vue.(没有改变)
        }
    }
};
</script>

点击按钮之后，发现控制台中this.$nextTick()和setTimeout()都发生了改变

可以发现this.$nextTick和setTimeout的效果是一样的，都是将回调方法放入异步队列中

this.$nextTick是当dom发生变化更新后执行的回调。setTimeout只是一个异步延迟执行

注意：
Vue.$nextTick() 返回一个 Promise 对象，所以你也可以使用 async/await 语法来替代回调函数：

async changeMsg() {  
  this.msg = "Hello World.";
    
  await this.$nextTick();  
    
  console.log(this.$refs.msgDiv.innerHTML); // 输出: "Hello World."  
}

中使用

在Vue 3中，nextTick的使用方式与Vue 2中类似，但它现在返回的是一个Promise对象，这使得我们可以更方便地使用async/await语法。以下是一个在Vue 3中使用nextTick的示例：

<template>  
  <div>  
    <button @click="changeText">更改文本</button>  
    <p ref="textElement">{{ text }}</p>  
  </div>  
</template>  
  
<script setup>  
import { ref, nextTick } from 'vue';  
  
const text = ref('初始文本');  
const textElement = ref(null);  
  
async function changeText() {  
  text.value = '新的文本';  
  // 等待DOM更新
  await nextTick(); //由于nextTick返回的是一个Promise，我们可以使用await关键字来等待它完成。这使得代码更加直观和易于理解。
  console.log(textElement.value.textContent); // 输出更新后的文本内容  
}  
</script>

如果你不需要使用await语法，你也可以传递一个回调函数给nextTick，就像这样：

<script setup>  
import { ref, nextTick } from 'vue';  
  
const text = ref('初始文本');  
  
function changeText() {  
  text.value = '新的文本';  
  
  nextTick(() => {  // 这个回调函数将在DOM更新后被调用，并输出更新后的文本内容。
    console.log(document.querySelector('p').textContent); // 输出更新后的文本内容  
  });  
}  
</script>

什么时候需要用的()?

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

<template>
	<div class="nextTick">
		<div ref="msgDiv">{{msg}}</div>
	</div>
</template>

<script type="text/ecmascript-6">
export default {
	name: "nextTick",
	data() {
		return {
			msg: "Hello Vue."
		};
	},
	created() {
		// this.$ = "更改了内容";  // 报错， 此时DOM并没有渲染
		this.$nextTick(function () {
			this.$refs.msgDiv.innerHTML = "更改了内容";  // 成功修改
		})
	}
};
</script>

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

(callback) 使用原理

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

中使用

什么时候需要用的()?

(callback) 使用原理

相关文章