vue.js全局API之nextTick全面解析
官方介紹：在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM。
就是DOM更新完成之后執(zhí)行的方法，并且超級(jí)方便的事情是回調(diào)函數(shù)中的this會(huì)綁定到最新的vue實(shí)例上。
代碼示例如下：
<p ref="mgs">{{mgs}}</p>
<button @click="updateDom">點(diǎn)擊更新DOM</button>
data:function () {
return {
mgs:"DOM"
}
}
updateDom:function () {
this.mgs = "update Dom";
console.log(this.$refs.mgs.innerHTML);
this.$nextTick(function () {
console.log(this.$refs.mgs.innerHTML);
})
}
點(diǎn)擊更新按鈕，調(diào)用updateDom，首先給mgs重新賦值，此時(shí)打印頁(yè)面中p標(biāo)簽對(duì)應(yīng)的內(nèi)容，以及nextTick中也打印相應(yīng)的內(nèi)容，結(jié)果如下：
從結(jié)果可以看出，this.mgs = “update Dom”;執(zhí)行之后，DOM并沒(méi)有直接更新，而nextTick是等到DOM更新完成之后進(jìn)行回調(diào)，回調(diào)函數(shù)中的this已經(jīng)是更新過(guò)的vue
代碼地址：https://github.com/Demon-han/vue_demo/
其中nextTick.vue為該實(shí)例，其他組件將在其他文章中詳細(xì)介紹
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ESLint是一個(gè)QA工具，這篇文章主要介紹了詳解ESLint在Vue中的使用小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
vuejs在解析時(shí)出現(xiàn)閃爍的原因及防止閃爍的方法
這篇文章主要介紹了vuejs在解析時(shí)出現(xiàn)閃爍的原因及防止閃爍的方法,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-09-09
解決vue.js在編寫(xiě)過(guò)程中出現(xiàn)空格不規(guī)范報(bào)錯(cuò)的問(wèn)題
下面小編就為大家?guī)?lái)一篇解決vue.js在編寫(xiě)過(guò)程中出現(xiàn)空格不規(guī)范報(bào)錯(cuò)的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
vue源碼學(xué)習(xí)之Object.defineProperty對(duì)象屬性監(jiān)聽(tīng)
這篇文章主要介紹了vue源碼學(xué)習(xí)之Object.defineProperty對(duì)象屬性監(jiān)聽(tīng)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
vue.js+element-ui動(dòng)態(tài)配置菜單的實(shí)例
今天小編就為大家分享一篇vue.js+element-ui動(dòng)態(tài)配置菜單的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue實(shí)現(xiàn)自定義字段導(dǎo)出EXCEL的示例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)自定義字段導(dǎo)出EXCEL的示例代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
Vue3除了keep-alive還有哪些實(shí)現(xiàn)頁(yè)面緩存詳解
Vue3中的keep-alive組件用于緩存頁(yè)面,以便在切換頁(yè)面時(shí)保留其狀態(tài),下面這篇文章主要給大家介紹了關(guān)于Vue3除了keep-alive還有哪些實(shí)現(xiàn)頁(yè)面緩存的相關(guān)資料,需要的朋友可以參考下2024-04-04
vue路由切換時(shí)取消之前的所有請(qǐng)求操作
這篇文章主要介紹了vue路由切換時(shí)取消之前的所有請(qǐng)求操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Vue實(shí)現(xiàn)右鍵菜單組件的超詳細(xì)教程(支持快捷鍵)
右鍵菜單組件非常常見(jiàn),所有的前端開(kāi)發(fā)工程師都會(huì)遇到類(lèi)似的功能組件開(kāi)發(fā)需求,這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)右鍵菜單組件的超詳細(xì)教程,文中介紹的方法支持快捷鍵,需要的朋友可以參考下2024-02-02
MVVM 是Model-View-ViewModel 的縮寫(xiě)，它是一種基于前端開(kāi)發(fā)的架構(gòu)模式，Vue.js 是一個(gè)提供 MVVM 風(fēng)格的雙向數(shù)據(jù)綁定的 Javascript 庫(kù)，專(zhuān)注于View 層。這篇文章給大家介紹Vue.js 和 MVVM 的注意事項(xiàng)，感興趣的朋友一起看看吧2016-11-11