檢測(cè)數(shù)據(jù)變化
- 當(dāng)你把一個(gè)普通的 JavaScript 對(duì)象傳給 Vue 實(shí)例的
data選項(xiàng)，Vue 將遍歷此對(duì)象所有的屬性堂鲜，并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter。 -
每個(gè)組件實(shí)例都有相應(yīng)的 watcher 實(shí)例對(duì)象贬派，它會(huì)在組件渲染的過(guò)程中把屬性記錄為依賴麦锯，之后當(dāng)依賴項(xiàng)的 setter 被調(diào)用時(shí)碎紊，會(huì)通知 watcher 重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新樊诺。data.png
執(zhí)行DOM更新
- Vue 異步執(zhí)行 DOM 更新仗考。只要觀察到數(shù)據(jù)變化，Vue 將開(kāi)啟一個(gè)隊(duì)列词爬，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變秃嗜。如果同一個(gè) watcher 被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次顿膨。這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和 DOM 操作上非常重要锅锨。然后，在下一個(gè)的事件循環(huán)“tick”中恋沃，Vue 刷新隊(duì)列并執(zhí)行實(shí)際 (已去重的) 工作必搞。Vue 在內(nèi)部嘗試對(duì)異步隊(duì)列使用原生的 Promise.then 和 MessageChannel，如果執(zhí)行環(huán)境不支持芽唇，會(huì)采用 setTimeout(fn, 0) 代替顾画。
