使用proxy實現(xiàn)一個更優(yōu)雅的vue【推薦】-創(chuàng)新互聯(lián)

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

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

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

proxy 介紹

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

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

以上引用內(nèi)容來自阮一峰的es6教程的Proxy章節(jié) 原文地址請戳這里。

我們來看看如何用Proxy去定義一個監(jiān)聽數(shù)據(jù)的函數(shù)

定義 observe

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

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

當(dāng)前標(biāo)題：使用proxy實現(xiàn)一個更優(yōu)雅的vue【推薦】-創(chuàng)新互聯(lián)
文章分享：http://muchs.cn/article10/cdcido.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、面包屑導(dǎo)航、App開發(fā)、網(wǎng)頁設(shè)計公司、網(wǎng)站營銷、做網(wǎng)站

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

猜你還喜歡下面的內(nèi)容