Vue.nextTick(),vue的nextTick这个方法有什么用
这个。$nextTick是在下一个dom更新周期后执行一个延迟的回调，在修改数据后立即使用这个方法获取更新后的dom。下面的文章主要介绍了关于这个的理解和使用的相关信息。Vue中的$nextTick()，供大家参考。
目录
这个。$nextTick()原则：1。Vue实现响应并不是指数据改变后DOM立即改变，而是按照一定的策略更新DOM。2.Vue官网3。等价转换，如果这个。$nextTick不起作用，尝试使用延迟4。这个的应用场景。$下一个滴答5。摘要
this.$nextTick()原理：
Vue实现响应并不是指DOM在数据改变后立即改变，而是按照一定的策略更新DOM。Vue修改数据后，视图不会立即更新，但同一事件周期内所有数据修改完成后，视图会统一更新。首先，修改数据，这是一个同步任务。同一事件周期的所有同步任务都在主线程上执行，形成一个执行栈，此时不涉及DOM。然后Vue打开一个异步队列，缓冲在这个事件周期中发生的所有数据更改。如果同一个观察器被多次触发，它只会被推入队列一次。
1.Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。
2.Vue官网
NextTick是下一个DOM更新周期后的延迟回调。如果在修改数据后立即使用$nextTick，就可以在回调中获得更新后的DOM。
新Vue({
//.
方法：{
//.
示例：function () {
//修改数据
this.message=已更改
//DOM尚未更新
这个。$nextTick(function () {
//DOM现在已更新
//`this `绑定到当前实例
this.doSomethingElse()
})
}
}
案例1:修改文本的值
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
标题文档/标题
/头
身体
div id=应用程序
span id= BTN { msg } }/span
Button @click=updateText 修改文本/按钮的值
/div
/body
脚本src=。/js/vue.js/script
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
味精：“你好，世界！”
},
方法：{
updateText() {
This.msg=修改文本的值
console.log(this.msg)
console . log(document . getelementbyid( BTN )。innerHTML)；
}
}
});
/脚本
/html
打开控制台：
可以看到，当我点击按钮时，msg数据会被更新作为响应，但是受msg影响的dom元素的文本值不会被更新。
用nextTick()改进
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
标题文档/标题
/头
身体
div id=应用程序
span id= BTN { msg } }/span
Button @click=updateText 修改文本/按钮的值
/div
/body
脚本src=。/js/vue.js/script
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
味精：“你好，世界！”
},
方法：{
updateText() {
This.msg=修改文本的值
console.log(this.msg)
这个。$nextTick(()={
console . log(document . getelementbyid( BTN )。innerHTML)；
});
}
}
});
/脚本
/html
打开控制台：
可以看到，当我单击按钮时，msg数据将被更新作为响应，但受msg影响的dom元素的文本值也被更新。
案例2:获取动态呈现的dom元素
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
标题文档/标题
/头
身体
div id=应用程序
你好，世界！/span
Button @click=show 显示/button
/div
/body
脚本src=。/js/vue.js/script
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
isShow: false
},
方法：{
show() {
this.isShow=true
console . log(document . getelementbyid( BTN ))
}
}
});
/脚本
/html
打开控制台。
可以看到，当我点击按钮时，iShow渲染的v-if的元素是成功的，但是iShow渲染的dom元素在函数中无法获取。
用nextTick()改进
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
标题文档/标题
/头
身体
div id=应用程序
你好，世界！/span
Button @click=show 显示/button
/div
/body
脚本src=。/js/vue.js/script
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
isShow: false
},
方法：{
show() {
this.isShow=true
这个。$nextTick(()={
console . log(document . getelementbyid( BTN ))
})
}
}
});
/脚本
/html
控制台操作：
可以看到动态dom元素被成功获取。
3.等价转换，如果this.$nextTick不起作用时尝试用延时器
这个。$nextTick(()={
做点什么
})
胜任
setTimeout(()={
做点什么
},0)
4.this.$nextTick的应用场景
在nextTick()的回调函数中。已创建()，dom尚未呈现。如果此时将数据(或其他dom操作)赋给hook函数是徒劳的，那么这个。$nextTick()此时会被广泛使用，而mounted()对应的created()的hook函数只有在dom渲染完成后才会开始渲染数据，所以需要在mounted()中操作dom。
5.总结
1.nextTick是下一个DOM更新周期结束后的延迟回调。如果在修改数据后立即使用$nextTick，就可以在回调中获得更新后的DOM。
2.我的理解是，nextTick方法相当于页面渲染完成时调用nextTick方法，nextTick方法可以获取页面最新的dom元素。
关于这个的理解和使用，这篇文章就到这里了。Vue中的$nextTick()。有关此的用法的更多信息。$ next tick()在Vue中，请搜索我们之前的文章或者继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。