vue-$nextTick-等待页面渲染完毕的回调
vue-$nextTickvue-cli中$nextTick的作用案例--切换标签内容第一种解决方法--使用定时器第二种方法(重要)---$nextTickvue-cli中$nextTick的作用作用:等待页面渲染完毕回调场景:操作dom的时候,数据修改,页面还没渲染完毕,就去获取数据,会有延迟,获取的是之前的数据案例–切换标签内容当我们需要切换标签的内容时,可能会因为没有渲染完毕,直接调用赋值时
·
vue-cli中$nextTick的作用
- 作用:
等待页面渲染完毕回调
- 场景:
操作dom的时候,数据修改,页面还没渲染完毕,就去获取数据,会有延迟,获取的是之前的数据
案例–切换标签内容
- 当我们需要切换标签的内容时,可能会因为没有渲染完毕,直接调用赋值时,会复制到最初没有改变的数据
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<h1 ref="msg">msg1:{{msg1}}</h1>
<h2>msg2:{{msg2}}</h2>
<h3>msg3:{{msg3}}</h3>
<button @click="changeMsg()">切换</button>
</div>
name: 'Home',
data() {return {
msg1 : "你好",
msg2 : '',
msg3 : ''
}},
methods : {
changeMsg() {
// 第一种
// 改变了msg1的值,触发了更新,开始渲染,不一定渲染完毕,
// 所以在下面获取的时候获取更新的数据可能有延迟
this.msg1 = "我爱我的祖国";
this.msg2 = this.$refs.msg.innerHTML;
this.msg3 = this.$refs.msg.innerHTML;
第一种解决方法–使用定时器
- 改变了msg1的值,触发了更新,开始渲染,不一定渲染完毕,
- 所以在下面获取的时候获取更新的数据可能有延迟
- 当然我们可以使用定时器或者计时器,设置0毫秒,但是当数据变多时,
- 就不是很友好
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<h1 ref="msg">msg1:{{msg1}}</h1>
<h2>msg2:{{msg2}}</h2>
<h3>msg3:{{msg3}}</h3>
<button @click="changeMsg()">切换</button>
</div>
export default {
name: 'Home',
data() {return {
msg1 : "你好",
msg2 : '',
msg3 : ''
}},
methods : {
changeMsg() {
// 第一种
// 改变了msg1的值,触发了更新,开始渲染,不一定渲染完毕,
// 所以在下面获取的时候获取更新的数据可能有延迟
// 当然我们可以使用定时器或者计时器,设置0毫秒,但是当数据变多时,
// 就不是很友好
this.msg1 = "我爱我的祖国";
setTimeout(function() {
this.msg2 = this.$refs.msg.innerHTML;
this.msg3 = this.$refs.msg.innerHTML;
},0)
}
}
}
第二种方法(重要)—$nextTick
- 第二种
- 所以为了解决这个问题,应该使用$nextTick
export default {
name: 'Home',
data() {return {
msg1 : "你好",
msg2 : '',
msg3 : ''
}},
methods : {
changeMsg() {
// 第一种
// 改变了msg1的值,触发了更新,开始渲染,不一定渲染完毕,
// 所以在下面获取的时候获取更新的数据可能有延迟
// 当然我们可以使用定时器或者计时器,设置0毫秒,但是当数据变多时,
// 就不是很友好
this.msg1 = "我爱我的祖国";
setTimeout(function() {
this.msg2 = this.$refs.msg.innerHTML;
this.msg3 = this.$refs.msg.innerHTML;
},0)
// 第二种
// 所以为了解决这个问题,应该使用$nextTick
this.msg1 = "我爱我的祖国";
this.$nextTick( () => {
// 渲染完毕再执行这个,所以才能没有延时的更改
this.msg2 = this.$refs.msg.innerHTML;
})
this.msg3 = this.$refs.msg.innerHTML;
}
}
}
</script>
更多推荐
已为社区贡献8条内容
所有评论(0)