目录概念原理举例应该什么时候使用Vue.$nextTick()呢?概念 在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,获取更新后的DOM 简单理解: 为了
在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,获取更新后的DOM
简单理解:
为了去解决数据更新了但是视图不更新的问题,当数据更新了,在DOM渲染后,自动执行该函数
Vue是异步执行dom更新的,一旦观察到数据变化,Vue就会开启一个队列,然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次,只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时,Vue会清空队列,并进行必要的DOM更新。
当你设置 vm.someData = ‘new value’,DOM 并不会马上更新,而是在异步队列被清除,也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情,就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。
<template>
<div>
<button ref="btn" @click="handleBtn()">{{ message }}</button>
</div>
</template>
<script>
export default {
data(){
return{
message:'这个是原始值'
}
},
methods:{
handleBtn:function(){
let that=this
that.message='修改后的值'
console.log(that.$refs.btn.innerText);//这里输出的还是原始值
}
}
}
</script>
<style>
</style>
通过例子可以看到这样的话最终输出的值还是原来的值,下面再看一下使用this.$nextTick()会发生什么?
<template>
<div>
<button ref="btn" @click="handleBtn()">{{ message }}</button>
</div>
</template>
<script>
export default {
data(){
return{
message:'这个是原始值'
}
},
methods:{
handleBtn:function(){
let that=this
that.message='修改后的值'
this.$nextTick(function(){
console.log(that.$refs.btn.innerText); //这里输出的是修改后的值
})
}
}
}
</script>
<style>
</style>
通过这个例子就可以明显的看到this.$nextTick()的作用。
注意:
vue实现响应并不是数据发生变化之后DOM立即变化。而是按照一定的策略进行DOM的更新,在使用this.$nextTick()以后,就可以在他的回调中获取到更新后的DOM
<template>
<div>
{{ message }}
<button @click="changeText()">测试</button>
</div>
</template>
<script>
export default {
data() {
return {
message: "这个是原始值",
};
},
methods: {
changeText () {
let that = this;
this.message = "这是修改后的值";
that.$nextTick(function(){
let txt=document.getElementById('btn').innerText
console.log(txt);
txt==='这个是原始值'? console.log('data的值发生改变时DOM的值没有立即更新') : console.log('data的值发生改变时DOM的值立刻更新了');
})
},
},
};
</script>
<style>
</style>
到此这篇关于一文学会什么是vue.nextTick()的文章就介绍到这了,更多相关vue.nextTick()内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: 一文学会什么是vue.nextTick()
本文链接: https://www.lsjlt.com/news/147177.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0