利用 Proxy API 實現乙個簡易 MVVM

2022-01-18 08:56:50 字數 743 閱讀 7755

vue 3 使用了 proxy api,有些手癢,就弄乙個簡單的結構玩玩吧。proxy api 見 mdn proxy

依賴收集:mvvm 初始化時劫持資料,並設定觀察者 dep。模仿 vue 結構是在 get 時往觀察者 dep 推入被觀察者 watcher,然後 set 時讓觀察者通知所有被觀察者開始更新。

資料響應:這裡只是簡單在 compiler 裡面去掃瞄了一遍所有帶著 v-text 和 v-model 鉤子的標籤做了處理:定義被觀察者 watcher,被觀察者的觸發函式寫上節點 dom 的更新。

當然我們知道 vue 的資料響應過程比這個複雜多了,有著虛擬 dom 和複雜的 diff 演算法。

我們知道 vue2.0 的反應系統是使用 object.defineproperty 的 getter 和 setter。 但是,vue 3 將使用 es2015 proxy 作為其觀察者機制。 這消除了以前存在的警告,使速度加倍,並節省了一半的記憶體開銷。

而為什麼使用 proxy 替代 object.defineproperty?proxy 可以劫持整個物件,並返回乙個新的物件。proxy 不僅可以**物件,還可以**陣列,還可以**動態增加的屬性。節省記憶體,速度加倍。

為了繼續支援 ie11,vue 3 將發布乙個支援舊觀察者機制和新 proxy 版本的構建

利用CoreAnimation實現乙個時間的進度條

那麼接下來就是如何用coreanimation實現乙個進度條控制項了。首先呢,讓我們建立乙個繼承自cashapelayer的wkprogressbarlayer。wkprogressbarlayer預設自身的bounds就是整個進度條的大小。inte ce wkprogressbarlayer ca...

利用CoreAnimation實現乙個時間的進度條

那麼接下來就是如何用coreanimation實現乙個進度條控制項了。首先呢,讓我們建立乙個繼承自cashapelayer的wkprogressbarlayer。wkprogressbarlayer預設自身的bounds就是整個進度條的大小。inte ce wkprogressbarlayer ca...

利用boost asio實現乙個簡單的伺服器框架

boost asio是乙個高效能的網路開發庫,windows下使用iocp,linux下使用epoll。與 不同的是,它並沒有提供乙個網路框架,而是採取元件的方式來提 用介面。但是對於常見的情況,採用乙個好用的框架還是能夠簡化開發過程,特別是asio的各個非同步介面的用法都相當類似。受到 sp se...