Vue 漸進式JavaScript 框架 學習筆記 - Vue 攔截監聽原理
目錄
攔截監聽原理
如何跟蹤變化
攔截監聽示例
觀察者
注意:vue3的變化
總結
攔截監聽原理
如何跟蹤變化
當你把一個普通的Javascript 對象傳入 Vue 實例作為data選項，Vue 將遍歷此對象所有的property，并使用 0bject.defineProperty 把這些 property 全部轉為 getter/setter。0bject.defineProperty 是 ES5 中一個無法 shim 的特性，這也就是 vue 不支持?IE8 以及更低版本瀏覽器的原因。
這些 getter/setter對用戶來說是不可見的，但是在內部它們讓 vue 能夠追蹤依賴，在 property 被訪問和修改時通知變更。這里需要注意的是不同瀏覽器在控制臺打印數據對象時對 getter/setter 的格化并不同，所以建議安裝 vue-devtools 來獲取對檢查數據更加友好的用戶界面。
攔截監聽示例
Vue對變量（狀態）改變攔截監聽的原理是利用Es5中一個方法。
示例如下：
<script>var obj = {};Object.defineProperty(obj, 'myname',{get() {console.log('訪問了');},set() {console.log('修改了')}})
</script>通過控制臺訪問和修改屬性
Get set攔截，只要有人訪問、有人修改就會被觸發
幫你進行攔截值的改變，幫你調用dom修改對象值。
觀察者
每個組件實例都對應一個 watcher 實例，它會在組件渲染的過程中把“接觸”過的數據 property 記錄為依賴。之后當依賴項的 setter 觸發時，會通知 watcher，從而使它關聯的組件重新渲染。
注意:vue3的變化
Object.defineProperty有以下缺點。
1、無法監聽es6的Set、Map 變化;
2、無法監聽Class類型的數據;
3、屬性的新加或者刪除也無法監聽,
4、數組元素的增加和刪除也無法監聽。
針對Object.defineProperty的缺點，ES6 Proxy都能夠完美得解決，它唯一的缺點就是，對IE不友好,所以vue3在檢測到如果是使用IE的情況下(沒錯，IE11都不支持Proxy)，會自動降級為Obiect.defineProperty的數據監聽系統。
總結
Vue 漸進式JavaScript 框架 學習筆記 - Vue 攔截監聽原理
