$nextTick:将回调函数延迟到dom更新数据后调用。
<template>
<div class="NextTickVue">
<p ref="msg">msg:{
{
message }}</p>
<p>msg1:{
{
message1 }}</p>
<button @click="changeMessage">改变message</button>
</div>
</template>
<script>
export default {
name: "NextTickVue",
data() {
return {
message: "hello",
message1: ""
}
},
methods: {
changeMessage() {
this.message = "你好啊同学!";
console.log(this.$refs.msg.innerHTML);
this.message1=this.$refs.msg.innerHTML;
},
}
}
</script>
改变message前:
改变message后:
经过上面两张结果运行图比较,可以看出,message1拿到的是message改变的数据,是因为vue是异步渲染的框架,数据更新是异步的,数据更新之后,dom是不会立即渲染
解决办法
1、使用定时器
changeMessage() {
this.message = "你好啊同学!";
//解决方法1:通过定时器
setTimeout(() => {
this.message1 = this.$refs.msg.innerHTML;
}, 2000);
}
2、$nextTick
$nextTick会在渲染之后被触发,用来获取最新的dom节点;
$nextTick的应用场景:
- 想要在生命周期函数created中进行dom操作,一定要放到$nextTick函数中进行;
- 在数据变化后再来执行某个操作,而这个操作需要使用随数据变化而变化的dom结构时,这个操作需要放到$nextTick中
changeMessage() {
this.message = "你好啊同学!";
// 解决方法2:$nextTick
this.$nextTick(() => {
this.message1 = this.$refs.msg.innerHTML;
})
}