- 原理
Vue中DOM的异步更新，Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。
- 用法
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用this.$nextTick()，然后等待 DOM 更新。
<template>
<div>
<p ref="msgRef">{{msg}}</p>
<button @click="handle">更新</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: '原始'
}
},
created () {
console.log("created：" + this.$refs.msgRef.innerHTML); // 这个里会报错，此时没有innerHTML，后面会不执行
this.$nextTick(() => {
console.log("created nextTick：" + this.$refs.msgRef.innerHTML);
})
},
methods: {
handle() {
this.msg = '新值';
console.log(this.$refs.msgRef.innerHTML);
this.$nextTick(() => {
console.log(this.$refs.msgRef.innerHTML);
})
}
}
</script>
结果
从打印的结果可以看出，因为在created()钩子函数的时候dom还没有渲染，所以会报错，created()里后面的就不会执行。
-
把console.log("created：" + this.$refs.msgRef.innerHTML);注释
-
从打印结果可以看到在created()中使用this.$nextTick()可以获取到值。
-
点击按钮
-
可以看到直接打印的是之前的值，使用this.$nextTick()打印的是更新后的值。
-
使用场景
- 在created()中进行操作的话一定要使用this.$nextTick(),
- 在根据数据变化进行DOM操作时使用this.$nextTick()
总结
- 在created()中使用this.$nextTick(),相当于在mounted()中进行操作，因为在created()时DOM还没有渲染
- 在项目中会经常遇到数据更新但是视图没有更新，这种情况就需要用到this.$set()，可以查看我的另一篇文章传送门
- 还有会根据数据变化对DOM进行操作获取某些数据，此时就发生获取不到更新后的值的情况，此时就可以使用this.$nextTick()
以上就是对this.$nextTick()简单的使用和理解。
