vue的nextTick这个方法有什么用,vue nexttick的作用

　　本文主要介绍了nextTick在vue中的作用以及几个简单的使用场景，帮助大家更好的理解和使用Vue框架。感兴趣的朋友可以了解一下。

目的

　　了解nextTick的功能和几个简单的使用场景。

正文

起什么作用？

　　在下一个DOM更新周期结束后执行延迟回调。使用此方法可以在修改数据后立即获取更新的DOM。

　　我想你们都知道或者了解Vue的渲染过程。Vue会在监测到数据变化后重新渲染，配合VDOM更新真实的DOM。nextTick的触发时间是在调用方法后第一次重新呈现之后。

如何使用？

　　使用方法有两种，一种是呼入回拨，一种是承诺。官方用法示例如下：

　　//修改数据

　　vm.msg=Hello

　　//DOM还没有更新

　　Vue.nextTick(function () {

　　//DOM已更新

　　})

　　//作为承诺(2.1.0起新增，详见下期提示)

　　Vue.nextTick()。then(function () {

　　//DOM已更新

　　})

　　如果您在SPA(单个文件组件)中，它可能看起来像这样。

　　模板

　　div id= test“{ msg } }/div

　　/模板

　　脚本

　　导出默认值{

　　名称：“应用程序”，

　　data() {

　　返回{

　　“你好，世界！”

　　}

　　},

　　方法(){

　　this.msg=嗨，世界！；

　　这个。$nextTick(()={

　　console.log(DOM updated:，document.getElementById(test )。innerHTML)

　　});

　　}

　　}

　　/脚本

有什么使用场景？

　　渲染完成后需要执行的一些方法。

初始化绑定或操作 DOM

　　比如在创建和挂载的回调中，如果需要操作渲染的DOM，就需要执行nextTick中的相关逻辑，这在你不得不使用一些需要绑定DOM的老库的时候很有用。

　　例如，当您加载UEditor时，您可能会这样播放。

　　模板

　　script id= container name= content type= text/plain 在此处编写您的初始化内容/脚本。

　　/模板

　　脚本

　　导出默认值{

　　已安装(){

　　this.nextTick(()={

　　var UE=UE . get editor( container )；

　　});

　　}

　　}

获取元素宽度

　　有两种方法可以得到Vue中的元素宽度。第一个是通过$refs[ref name ].style.width，第二个可以通过传统的DOM操作获得。然而，要获得准确的元素宽度，这两个方法需要在DOM呈现之后执行。

　　模板

　　p= my width v-if= showme { { message } }/p button @ click= getmy width 获取p元素/按钮的宽度

　　/模板

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　信息：“你好，世界！”,

　　showMe:假的，

　　},

　　方法：{

　　getMyWidth() {

　　this.showMe=true

　　//this . message=this . refs . my width . offsetwidth；//错误类型错误：this.refs.mywidth未定义

　　this.nextTick(()={

　　//更新并执行//dom元素。此时可以得到P元素的属性this . message=this . refs . my width . offsetwidth；})

　　}

　　}

　　}

　　}

　　/脚本

总结

　　虽然Vue的设计理念并不建议我们直接操作DOM，但是在某些场景下还是存在一些令人困惑的问题。理解了Vue的渲染逻辑之后，我们就可以用nextTick()来解决了。

　　以上就是如何在vue中使用nextTick的细节。更多关于在Vue中使用nextTick的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。