nextTick如何在Vue中使用?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
Vue.nextTick是Vue官方给我们提供的一个API(方法),作用是在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM;
那么我们的理解是:当数据发生变化之后,DOM视图并不会立即更新,如果我们在发生变化之后立马去获取某个节点或者某个节点的值,很有可能结果就是未定义的,因为Vue实现响应式并不是数据发生变化之后DOM立即变化,而是按一定的策略进行DOM的更新。
来看一个小演示:
应用程序。vue
& lt; template>
,& lt; div id=癮pp"比;
,,,& lt; div ref=癿essage"在{{味精}}& lt;/div>
,,,& lt; div v=癿sg1"在{{msg1}} & lt;/div>
,,,& lt; button @click=癱hangeMsg"祝辞Change 从而Message
,& lt;/div>
& lt;/template>
& lt; script>
export default {
,名字:& # 39;应用# 39;,,
,数据(){
return {才能
,,味精:“Hello Vue"
,,,msg1: & # 39; & # 39;
,,}
},
,方法:{
changeMsg才能(){
,,this.msg=& # 39; hello & # 39;;
,,//,this.msg1=efs.message.innerHTML美元;
,,//,console.log(“更新DOM之前:“+ this.msg1)
,,,这个。nextTick美元(()=祝辞{
,,,,this.msg1=efs.message.innerHTML美元;
,,,,console.log(“更新DOM之后:“+ this.msg1)
,,,})
,,}
,}
}
& lt;/script>
& lt; style>
# app {
,字体类型:& # 39;Avenir& # 39;,, Helvetica,, Arial,,无衬线;
,-webkit-font-smoothing:平滑;
,-moz-osx-font-smoothing:灰度;
,text-align:中心;
,颜色:# 2 c3e50;
,margin-top: 60 px;
}
& lt;/style>
& lt; template>
,& lt; div id=癮pp"比;
,,,& lt; div ref=癿essage"在{{味精}}& lt;/div>
,,,& lt; div v=癿sg1"在{{msg1}} & lt;/div>
,,,& lt; button @click=癱hangeMsg"祝辞Change 从而Message
,& lt;/div>
& lt;/template>
& lt; script>
export default {
,名字:& # 39;应用# 39;,,
,数据(){
return {才能
,,味精:“Hello Vue"
,,,msg1: & # 39; & # 39;
,,}
},
,方法:{
changeMsg才能(){
,,this.msg=& # 39; hello & # 39;;
,,this.msg1=efs.message.innerHTML美元;
,,,console.log(“更新DOM之前:“+ this.msg1)
,,,这个。nextTick美元(()=祝辞{
,,,,this.msg1=efs.message.innerHTML美元;
,,,,console.log(“更新DOM之后:“+ this.msg1)
,,,})
,,}
,}
}
& lt;/script>
& lt; style>
# app {
,字体类型:& # 39;Avenir& # 39;,, Helvetica,, Arial,,无衬线;
,-webkit-font-smoothing:平滑;
,-moz-osx-font-smoothing:灰度;
,text-align:中心;
,颜色:# 2 c3e50;
,margin-top: 60 px;
}
null
