前端（vue）入門到精通課程，老師在線輔導(dǎo)：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用

在上一篇文章中，我們介紹了具體什么是變更檢測(cè)，用一個(gè)原生JS例子來(lái)更好的去理解變更檢測(cè)，以及介紹了在哪些場(chǎng)景下會(huì)觸發(fā)變更檢測(cè)。前文中總結(jié)了5種工作中常見的場(chǎng)景，但是我們需要先思考一下，Angular的變更檢測(cè)是否支持所有的異步事件呢？如果支持，可以列出來(lái)嗎？如果有些不支持，哪些不支持呢？這些問題會(huì)在后續(xù)文章中詳細(xì)的講解。【相關(guān)教程推薦：《angular教程》】

如何訂閱異步事件

只要發(fā)生了異步操作，Angular就后進(jìn)行變更檢測(cè)，那么Angular是如何訂閱（感知）到異步事件的呢？也就是說，當(dāng)異步事件執(zhí)行的時(shí)候，Angular是怎么知道的呢？先來(lái)了解一下zone.js。

zone.js

zone.js 提供了一種稱為zone的機(jī)制，用于封裝和攔截瀏覽器中的異步任務(wù)，還提供了異步生命周期鉤子和統(tǒng)一的異步錯(cuò)誤處理機(jī)制。

zone.js是通過打補(bǔ)丁的方式來(lái)對(duì)瀏覽器中常見方法和元素進(jìn)行攔截，比如setTimeout和HTMLElement.prototype.onclick。Angular在啟動(dòng)時(shí)會(huì)利用zone.js修補(bǔ)幾個(gè)瀏覽器API，從而去實(shí)現(xiàn)異步事件的捕獲，并在捕獲事件后調(diào)用變更檢測(cè)。

package.json如下示例：

{   "dependencies": {        ...     "zone.js": "~0.10.2"   } }

可以簡(jiǎn)單來(lái)看一下zone.js。

比如，在Vue2中的數(shù)據(jù)響應(yīng)式，我們都知道它是使用了Object.defineProperty來(lái)實(shí)現(xiàn)數(shù)據(jù)變化的攔截，但是它存在很多問題，它只可以監(jiān)聽對(duì)象的屬性變化，但是對(duì)于數(shù)組的變化時(shí)無(wú)能為力的。數(shù)組原型中有7個(gè)方法可以引起數(shù)組的變化，對(duì)于這些方法Vue都需要感知到他們，那怎么實(shí)現(xiàn)呢？拿push方法作為例子，需要把原始的push方法覆蓋掉，實(shí)現(xiàn)一個(gè)新的push，新的push方法要保留原始push方法的功能，還要通知依賴進(jìn)行更新。

zone.js中的實(shí)現(xiàn)和這個(gè)思路是一樣的，來(lái)看一段簡(jiǎn)化的代碼模擬一下setTimeout的補(bǔ)丁過程：

function setTimeoutPatch() {   // 存儲(chǔ)原始的setTimeout   var originSetTimeout = window['setTimeout'];   // 對(duì)瀏覽器原生方法的包裹封裝   window.setTimeout = function () {       return global['zone']['setTimeout'].apply(global.zone, arguments);   };   // 創(chuàng)建包裹方法，提供給上面重寫后的setTimeout使用   Zone.prototype['setTimeout'] = function (fn, delay) {     // 先調(diào)用原始方法    originSetTimeout.apply(window, arguments);    // 執(zhí)行完原始方法后就可以做其他攔截后需要進(jìn)行的操作了    ...   }; }

是不是對(duì)zone.js的基本原理有了了解了呢。