[toc] ### 1.$nextTick使用場景 在vue中，如果改變了dom內部綁定的值，立即獲取dom的innerHTML，會出現拿到的還是原來的值，這個時候需要用this.$nextTick方法執行回調函數 ```js <div id="app">{{a}}</div> let vm = new Vue({ el: '#app', data: { a: 1 }, mounted() { this.a = 2 console.log('dom節點內容：', app.innerHTML) // 打印出來的還是1 } }) ``` ```js mounted() { this.a = 2 this.$nextTick(() => { console.log('dom節點內容：', app.innerHTML) // 這樣打印出來的就是2 }) } ``` ### 2.原理 $nextTick當中的操作不會立即執行，而是會等數據、和dom更新之后再執行。 如何實現？ 1.$nextTick內部的方法，會被放到一個callbacks數組中 2.當vue中的數據發生更改時，會觸發set方法，set會調用dep上的notify方法，通知watcher執行update方法 3.update方法會觸發queueWatcher方法，queueWatcher會調用nextTick，并添加一個flushSchedulerQueue方法 4.最后會依次執行callbacks數組中存入的nextTick回調方法，但是這個方法會被promise.then或者Mutation.observer包裹起來，或者setTimeout(根據瀏覽器是否支持判斷)，實現了一個異步的調用 ```js update () { /* istanbul ignore else */ if (this.lazy) { this.dirty = true } else if (this.sync) { this.run() } else { queueWatcher(this) // 異步更新邏輯 } } ``` ```js // queueWatcher nextTick(flushSchedulerQueue) ``` ```js function flushCallbacks () { pending = false const copies = callbacks.slice(0) callbacks.length = 0 for (let i = 0; i < copies.length; i++) { copies[i]() } } ``` ----- 把回調函數放入callbacks等待執行 將執行函數放到微任務或者宏任務中 事件循環到了微任務或者宏任務，執行函數依次執行callbacks中的回調 但是nextTick是同步執行的，同步的把里面的值放到異步隊列里了 ### 3.watcher去重 ```js this.a = 100 this.a = 200 //代碼執行了兩次，但是視圖只更新了一次 ``` 因為vue的watcher會去重。 數據發生變化之后，vue的dom并不一定馬上發生變化，vue將開啟一個隊列，并緩沖在同一事件循環中發生的所有數據改變，如果同一個watcher被多次觸發，只會被推入到隊列一次。 ```js addDep (dep: Dep) { const id = dep.id if (!this.newDepIds.has(id)) { this.newDepIds.add(id) this.newDeps.push(dep) if (!this.depIds.has(id)) { dep.addSub(this) } } } ``` 原理：添加dep的時候，會看這個dep的id，如果已經有了，那么就不會往里面push了