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