使用proxy實現一個更優雅的vue【推薦】-創新互聯

如果你有讀過Vue的源碼，或者有了解過Vue的響應原理，那么你一定知道Object.defineProperty(), 那么你也應該知道，Vue 2.x里，是通過 遞歸 + 遍歷 data 對象來實現對數據的監控的， 你可能還會知道，我們使用的時候，直接通過數組的下標給數組設置值，不能實時響應，是因為Object.defineProperty() 無法監控到數組下標的變化，而我們平常所用的數組方法 push , pop , shift , unshift , splice , sort , reverse , 其實不是真正的數組方法，而是被修改過的,這些都是因為 Object.defineProperty() 提供的能力有限，無法做到完美。

成都創新互聯2013年開創至今，是專業互聯網技術服務公司，擁有項目網站設計、成都網站建設網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元欽南做網站,已為上家服務,為欽南各地企業和個人服務,聯系電話:18982081108

網上看過很多關于Vue的源碼解讀或者實現一個簡易版的Vue的教程，還都是用 Object.defineProperty (大概是為兼容性考慮吧), 而 Object.defineProperty() 確實存在諸多限制, 據說Vue的3.x版本會改用Proxy，那么今天我們就先來嘗嘗鮮，用Proxy實現一個簡單版的Vue

proxy 介紹

Proxy 用于修改某些操作的默認行為，等同于在語言層面做出修改，所以屬于一種“元編程”（meta programming），即對編程語言進行編程。

Proxy 可以理解成，在目標對象之前架設一層“攔截”，外界對該對象的訪問，都必須先通過這層攔截，因此提供了一種機制，可以對外界的訪問進行過濾和改寫。Proxy 這個詞的原意是代理，用在這里表示由它來“代理”某些操作，可以譯為“代理器”。

以上引用內容來自阮一峰的es6教程的Proxy章節 原文地址請戳這里。

我們來看看如何用Proxy去定義一個監聽數據的函數

定義 observe

_observe (data){
 var that = this
 // 把代理器返回的對象存到 this.$data 里面
 this.$data = new Proxy(data, {
 set(target,key,value){
 // 利用 Reflect 還原默認的賦值操作
 let res = Reflect.set(target,key,value)
 // 這行就是監控代碼了
 that.handles[key].map(item => {item.update()})
 return res
 }
 })
}

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前標題：使用proxy實現一個更優雅的vue【推薦】-創新互聯
文章分享：http://m.kartarina.com/article10/cdcido.html

成都網站建設公司_創新互聯，為您提供小程序開發、面包屑導航、App開發、網頁設計公司、網站營銷、做網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯