vue中的nextTick
vue.nextTick的官方定義是:
在下次 DOM 更新迴圈結束之後執行延遲迴調。在修改資料之後立即使用這個方法,獲取更新後的 DOM。
實際上也就是傳進來的函式延遲到dom更新後再使用,也就是延遲執行了程式碼
下面有個網上的小例子:
<div class="app">
<div id="msgDiv">{{msg}}</div>
<div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>
<div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>
<div v-if="msg3">Message got outside $nextTick: {{msg3}}</div>
<button @click="changeMsg">
Change the Message
</button>
</div>
<script>
new Vue({
el: '.app',
data: {
msg: 'Hello Vue.',
msg1: '1',
msg2: '2',
msg3: '3'
},
methods: {
changeMsg() {
this.msg = "Hello world"
var msgDiv=document.getElementById('msgDiv')
this.msg1 = msgDiv.innerHTML
// nextTick
this.$nextTick(() => {
this.msg2 = msgDiv.innerHTML
})
this.msg3 = msgDiv.innerHTML
}
}
})
</script>
沒有使用nextTick時,雖然有賦值操作,但是並沒有引起檢視層的更新,有了nextTick,我們只需要把要執行的函式傳遞給t
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/3407/viewspace-2817130/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Vue中$nextTick的理解Vue
- 淺析 Vue 2.6 中的 nextTick 方法Vue
- 分享一下 Vue 中 nextTick 的使用Vue
- 淺析Vue 中 $nextTick 機制Vue
- vue的nextTick的實現Vue
- Vue.nextTick()理解Vue
- Vue nextTick 機制Vue
- Vue 之 nextTick 原理Vue
- 從event loop看vue的nextTickOOPVue
- 從 Vue3 原始碼中再談 nextTickVue原始碼
- [精讀原始碼系列]Vue中DOM的非同步更新和Vue.nextTick()原始碼Vue非同步
- 基於原始碼分析Vue的nextTick原始碼Vue
- Vue番外篇 — vue.nextTick()淺析Vue
- Vue番外篇 -- vue.nextTick()淺析Vue
- 【原始碼&庫】Vue3 中的 nextTick 魔法背後的原理原始碼Vue
- Vue原始碼解析之nextTickVue原始碼
- 前端 | Vue nextTick 獲取更新後的 DOM前端Vue
- Vue nextTick執行時機分析Vue
- Vue.js非同步更新及nextTickVue.js非同步
- 原始碼解讀-vue是如何實現$nextTick的原始碼Vue
- 從原始碼裡面瞭解vue的nextTick的使用原始碼Vue
- Vue2非同步更新及nextTick原理Vue非同步
- Vue非同步更新機制以及$nextTick原理Vue非同步
- vue中$nextTick詳細講解保證你一看就明白Vue
- Vue原始碼閱讀一:說說vue.nextTick實現Vue原始碼
- nextTick 在 vue 2.5 和 vue 2.6 之間有什麼不同Vue
- Event Loop是個什麼玩意:從 Vue 的 nextTick 說起OOPVue
- Vue2.0原始碼閱讀筆記(四):nextTickVue原始碼筆記
- 瀏覽器事件迴圈機制與Vue nextTick的實現瀏覽器事件Vue
- vue.nextTick()方法,在html元素上面設定ref後,在vue中使用VueHTML
- vue什麼情況下需要用到this.$nextTickVue
- Vue原始碼閱讀- 批量非同步更新與nextTick原理Vue原始碼非同步
- Vue原始碼閱讀 - 批量非同步更新與nextTick原理Vue原始碼非同步
- Vue非同步更新 - nextTick為什麼要microtask優先?Vue非同步
- 前端筆記-vue v2.6.10原始碼註釋-nextTick前端筆記Vue原始碼
- 090 $nextTick
- 雙十一,打包半價理解Vue的nextTick與watcher以及Dep的藍色生死戀?Vue
- Vue你不得不知道的非同步更新機制和nextTick原理Vue非同步