Vue原始碼學習 手寫Vue(三) proxy

2021-10-23 07:49:51 字數 661 閱讀 1557

我們希望能通過hvue的例項訪問我$data中的屬性(如:this.message),這時我們可以通知**現實。

1、為hvue類新增proxydata方法

// hvue.js

class

hvue

,set

(newval)})

}}

2、在hvue類observe方法中,新增this.proxydata(key)

// hvue.js

class

hvue

,set

(newval)})

}}

到這裡我們可以測試一下了

// index.html

"./hvue.js"

>

<

/script>

newhvue(}

})'new message'

'new bar'

'again update message'

<

/script>

<

/body>

看了三行日誌,說明通過hvue例項,也能設定和訪問$data的屬性了

vue原始碼學習

new vue發生了什麼 此處只針對最簡單基礎的new vue過程,一般專案中採用.vue單檔案元件的形式開發,下面會介紹 對於 runtime compile 版本 初始化乙個 vue 例項的一系列相關環境 watcher,lifecycle,methods等等 compile 將 templat...

Vue原始碼學習筆記

最近偷懶好久沒有寫部落格了,一直想繼續vue學習系列,想深入vue原始碼來寫。結果發現自己層次不夠,對js的理解差好多。所以一直想寫一直擱置著。最近重新振作決心看完vue原始碼,並且以我們這類前端小白的角度來一步步弄懂vue原始碼。vue.js 本質上就是乙個包含各種邏輯的乙個function。而我...

vue原始碼學習筆記

最近在看vue的原始碼,因為本人比較小白,所以很多地方理解起來會有一定難度,好在有很多大分享了vue原始碼相關的文章,整理一下吧 vue.js 原始碼學習筆記 囧克斯,這篇文章是老師推薦的,裡面總結了vue原始碼中比較值得關注的地方,不過文章應該寫的比較早了,文中講的vue是以前的版本,檔案結構會和...