vue->$nextTick

引用官方的話:為了在數據變化之后等待 Vue 完成更新 DOM ，可以在數據變化之后立即使用 Vue.nextTick(callback)

• ex1

<div><button @click="add">add</button><div ref="tagName">{{name}}</div> </div> data () {return {name: merlo} } methods: {add() {this.name = 'iron man'console.log(this.$ref['tagName'].innerHTML) // 仍然是merlothis.$nextTick((v) => {console.log(this.$ref['tagName'].innerHTML) // 已經變成iron man})} }

• ex2

<div><button @click="add">add</button><div ref="tagName" :style="css">{{info}}</div> </div> data() {return {css: { height: '666px'}} } methods: {add() {this.css = { height: '666666px' }console.log(this.$ref['tagName'].offsetHeight) // 依然666pxthis.$nextTick((v) => {console.log(this.$ref['tagName'].offsetHeight) // 變成666666px})} }

相關原理

在 Vue 2.4 之前都是使用的 microtasks，但是 microtasks 的優先級過高，在某 些情況下可能會出現比事件冒泡更快的情況，但如果都使用 macrotasks 又可能會出現 渲染的性能問題。所以在新版本中，會默認使用 microtasks，但在特殊情況下會使用 macrotasks，比如 v-on。

macrotasks: microtasks的作用是用來調度應在當前執行的腳本執行結束后立即執行的任務。 例如響應事件、或者異步操作，以避免付出額外的一個task的費用。

• I/O
• setTimeout
• setInterval
• setImmediate
• requestAnimationFrame
• UI rendering

microtasks: 就是常說的任務隊列task queue，作用是為了讓瀏覽器能夠從內部獲取javascript / dom的內容并確保執行棧能夠順序進行。

• process.nextTick
• Promises
• Object.observe
• MutationObserver

ex:

setTimeout(function(){console.log(1)},0);new Promise(function(resolve){console.log(2)for( var i=100000 ; i>0 ; i-- ){i==1 && resolve()}console.log(3)}).then(function(){console.log(4)});console.log(5);// 以上打印結果 2,3,5,4,1

tip：

在Microsoft Edge, Firefox 40, iOS Safari 以及 desktop Safari 8.0.8 中setTimeout會先于Promise

參考資料: - macrotask within an event loop context - 知乎-Promise的隊列與setTimeout的隊列有何關聯? - 通過microtasks和macrotasks看JavaScript異步任務執行順序 - 阮一峰-JavaScript 運行機制詳解：再談Event Loop

---

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue function (i)第一次点击不执行_vue下$nextTick及原理浅析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。