扒一扒vue的資料追蹤原理

大家都知道在angular或vue中，資料的更新會實時的反應到dom上，那麼到底是什麼原理呢，下面就vue**一下。

開啟vue的官網，可以看到它關於vue如何追蹤變化的原理。

把乙個普通物件傳給 vue 例項作為它的 data 選項，vue.js 將遍歷它的屬性，用 object.defineproperty 將它們轉為 getter/setter。這是 es5 特性，不能打補丁實現，這便是為什麼 vue.js 不支援 ie8 及更低版本。

使用者看不到 getter/setters，但是在內部它們讓 vue.js 追蹤依賴，在屬性被訪問和修改時通知變化。乙個問題是在瀏覽器控制台列印資料物件時 getter/setter 的格式化不同，使用 vm.$log() 例項方法可以得到更友好的輸出。

模板中每個指令/資料繫結都有乙個對應的 watcher 物件，在計算過程中它把屬性記錄為依賴。之後當依賴的 setter 被呼叫時，會觸發 watcher 重新計算 ，也就會導致它的關聯指令更新 dom。

可以看到defineproperty中給屬性getter,setter的設定，通過函式名可以猜測，一旦該屬性被獲取，便會新增依賴；同樣的，一旦該屬性被更改，便會發出通知。

如果對defineproperty有疑惑的同學，可以翻翻js高程中attribute這一章，或者看看我的這篇文章理解物件之attribute.

扒一扒2023年我看過的書

技術類 com技術內幕 看這本書的理由很簡單，我看到公司的 有用到com技術，雖然我的工作並不涉及這個，但以前就對com垂涎已久，所以就看了這本書，沒看完，看到第9章，後面就沒看了。內容通俗易懂，寫的很好。明年準備花一些時間再看下這書，還有 com本質論 directx 9遊戲開發程式設計基礎 傳說...

扒一扒滑動視窗演算法的褲子

目錄 1 演算法框架 2 leetcode76.最小覆蓋子串 3 leetcode567.字串的排列 4 leetcode438.找到字串中所有字母異位詞 5 leetcode3.無重複字元的最長子串 int left 0,right 0 while right s.size 這個演算法技巧的時間複...

扒一扒我上家公司的奇葩事

從上一家公司離職有將近乙個月的時間了，也拿到了一點點競業限制的補償，所以現在可以扒一扒上一家公司的奇葩事蹟了。由於鄙人所在的城市太小，公司名字還是被我無恥的膩掉了。奇葩一 年終獎到下一年10月份才發。丫的語文小學水平麼？明白年終獎是什麼意思麼？人力資源總監說 年終獎財務到10月份才能算出來。還 是上...