vue中nextTick用法實例
更新時間：2019年09月11日 14:52:03 作者：佳琪歐尼
在本篇文章里小編給大家整理了關(guān)于vue中nextTick用法實例以及相關(guān)代碼內(nèi)容，需要的朋友們可以參考下。
什么是Vue.nextTick()
官方文檔解釋如下：
在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的 DOM。
我理解的官方文檔的這句話的側(cè)重點在最后那半句獲取更新后的DOM，獲取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出問題，所以就衍生出了這個獲取更新后的DOM的Vue方法。所以放在Vue.nextTick()回調(diào)函數(shù)中的執(zhí)行的應(yīng)該是會對DOM進行操作的 js代碼，比如Swiper擴展包的
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false
});
<ul id="demo">
<li v-for="item in list">{{item}}</div>
</ul>
new Vue({
el:'#demo',
data:{
list=[0,1,2,3,4,5,6,7,8,9,10]
},
methods:{
push:function(){
this.list.push(11);
this.nextTick(function(){
alert('數(shù)據(jù)已經(jīng)更新')
});
this.$nextTick(function(){
alert('v-for渲染已經(jīng)完成')
})
}
}})
- Vue.nextTick(callback)`，當數(shù)據(jù)發(fā)生變化，更新后執(zhí)行回調(diào)。
- Vue.$nextTick(callback)`，當dom發(fā)生變化，更新后執(zhí)行的回調(diào)。
以上就是本次介紹的全部知識點內(nèi)容，感謝大家對腳本之家的支持。
您可能感興趣的文章:
- Vue nextTick的原理解析
- Vue中的nextTick作用和幾個簡單的使用場景
- 淺析vue中的nextTick
- 全面解析Vue中的$nextTick
- VUE異步更新DOM - 用$nextTick解決DOM視圖的問題
- Vue.js原理分析之nextTick實現(xiàn)詳解
- Vue中this.$nextTick的作用及用法
- 詳解vue中$nextTick和$forceUpdate的用法
- 深入學習Vue nextTick的用法及原理
- vue源碼nextTick使用及原理解析
- 一文了解Vue中的nextTick
- 瀏覽器事件循環(huán)與vue nextTicket的實現(xiàn)
- vue中$nextTick的用法講解
- 從源碼里了解vue中的nextTick的使用
- vue2.0$nextTick監(jiān)聽數(shù)據(jù)渲染完成之后的回調(diào)函數(shù)方法
- 詳解vue指令與$nextTick 操作DOM的不同之處
- 深入理解Vue nextTick 機制
- 談?wù)刅ue中的nextTick
相關(guān)文章
vue+element模態(tài)框中新增模態(tài)框和刪除功能
這篇文章主要介紹了vue+element模態(tài)框中新增模態(tài)框和刪除功能,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
這篇文章主要介紹了vue中多個倒計時實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要介紹了vue+element UI中如何給指定日期添加標記問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了VUEX-action可以修改state嗎，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了webpack搭建vue環(huán)境時報錯異常解決,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
vue和webpack項目構(gòu)建過程常用的npm命令詳解
本文通過實例代碼給大家介紹了vue和webpack項目構(gòu)建過程常用的npm命令,需要的朋友可以參考下2018-06-06
vue3語法中使用vscode打開滿屏紅線報錯的完美解決方法
這篇文章主要介紹了vue3語法中使用vscode打開滿屏紅線報錯的完美解決方法,本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
這篇文章主要為大家介紹了Vue模板語法v-bind教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
解決ant design vue 表格a-table二次封裝,slots渲染的問題
這篇文章主要介紹了解決ant design vue 表格a-table二次封裝,slots渲染的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Vue 前端導出后端返回的excel文件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04