一文一什么,什么是文学一文的作者
本文主要介绍一篇关于学习vue.nextTick()是什么的文章。以下文章重点介绍了课题的相关信息，有一定的参考价值，有需要的朋友可以参考一下。
目录
应该什么时候vue。$nextTick()用于概念原理示例？
概念
在下一个DOM更新周期后执行延迟回调，在修改数据后立即使用该方法获取更新的DOM。
简单理解：
为解决数据更新但视图不更新的问题，在数据更新时，DOM渲染后自动执行函数。
原理
Vue异步执行dom更新。一旦观察到数据变化，Vue将打开一个队列，然后将在同一个事件循环中观察到数据变化的观察器推入这个队列。如果该观察器被多次触发，它将只被推入队列一次。这种缓冲行为可以有效去除重复数据带来的不必要的计算和DOm操作。在下一个事件周期，Vue将清空队列并进行必要的DOM更新。
当设置VM.somedata= newvalue 时，不会立即更新DOM，但会在清除异步队列时执行必要的DOM更新，即在下一个事件周期开始时执行更新。此时，如果你想根据更新后的DOM状态做点什么，就会出现问题。要在数据更改后等待Vue完成更新DOM，可以在数据更改后立即使用Vue.nextTick(callback)。这样，回调函数将在DOM更新完成后被调用。
举例
模板
差异
button ref= BTN @ click= handle BTN() { { message } }/button
/div
/模板
脚本
导出默认值{
data(){
返回{
消息：“这是原始值”
}
},
方法：{
handleBtn:function(){
让那个=这个
That.message=修改值
console.log(那个。$ refs . BTN . innertext)；//这里的输出仍然是原始值
}
}
}
/脚本
风格
/风格
通过例子可以看出，最终输出值还是原来的值。让我们来看看当这个。使用了$nextTick()。
模板
差异
button ref= BTN @ click= handle BTN() { { message } }/button
/div
/模板
脚本
导出默认值{
data(){
返回{
消息：“这是原始值”
}
},
方法：{
handleBtn:function(){
让那个=这个
That.message=修改值
这个。$nextTick(function(){
console.log(那个。$ refs . BTN . innertext)；//这里的输出是修改后的值
})
}
}
}
/脚本
风格
/风格
这个的作用。通过这个例子可以清楚地看到$nextTick()。
注意：
vue实现的反应并不是DOM在数据改变后立即改变。而是按照一定的策略更新DOM。用了这个之后。$nextTick()，可以在他的回调中获取更新后的DOM。
应该什么时候使用vue.$nextTick()呢？
Vue生命周期的created()钩子函数执行的DOM操作必须放在Vue.nextTick()的回调函数中。原因是在执行created () hook函数时，DOM操作是无效的，所以DOM操作的js代码必须放在Vue.nextTick()的回调函数中。它对应于挂载的钩子函数，因为当钩子函数被执行时，所有的DOM挂载都已经完成。当你想在项目中基于改变DOM元素的数据后的新dom做一些事情，* *需要把对新DOM的一系列js操作放到Vue.nextTick()的回调函数中；* *通俗的理解就是：更改完数据后，想要立即操作新视图，需要使用js模板。
差异
{{消息}}
Button @click=changeText()测试/button
/div
/模板
脚本
导出默认值{
data() {
返回{
消息：“这是原始值”，
};
},
方法：{
changeText () {
让那个=这个；
This.message=这是修改后的值；
那个。$nextTick(function(){
let txt=document . getelementbyid( BTN )。内部文本
console . log(txt)；
Txt===这是原值？Console.log(数据的值改变时DOM的值不立即更新):console.log(数据的值改变时DOM的值立即更新)；
})
},
},
};
/脚本
风格
/风格
关于学习vue.nextTick()是什么的这篇文章到此为止。关于vue.nextTick()的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。