Vue源碼解析 在 new Vue的時候是怎樣進行數據代理的

清明假期沒有出去浪,在學校研究Vue的源碼,小弟不才,花了一個下午的時間才整明白在new Vue的時候是怎樣使用 Object.defineProperty進行數據代理的, 本着輸出就是最好的review的心,寫一篇掘金的處女文!

先看一下對於 Object.defineProperty(obj, prop, descriptor) 的定義

這個方法接受三個參數, 前兩個參數比較好理解, 第一個參數 obj 就是要進行代理或者要進行設置屬性的那個對象, 第二個參數 prop 是要進行設置的對象的屬性
第三個參數 descriptor 略微有點點麻煩,他是一個對象 裏面有一些屬性 和一個 set() get() 方法 這裏我就直接放我下午折騰的小demo了

基本上我註釋寫的比較全了, 須要注意的就是 set get 和 value writable 不共存
簡單說就是 我對這個對象新添加了一個屬性 names 而且這個 names 裏有兩個監聽他 取值和設置值的函數, 只要對 names這個屬性進行操做就會觸發.

簡單介紹完這個方法 咱們來看一下最初的時候Vue是如何使用他的

這是Vue源碼的目錄

其中 core這個文件夾下的是Vue的核心代碼 咱們能夠在 instance 下的 index.js 找到最開始的Vue的那個構造函數,Vue的源頭就是一個構造函數 咱們在 new Vue() 的時候就是在建立一個Vue的實例 並將裏面的配置 好比 el , data, methods什麼的做爲參數傳入, 以後咱們看到調用了圈出來的 this._init(options) 這個方法定義在當前目錄的 init.js裏面, 就開始合併傳入的options配置以及初始化生命週期啥的, 直到遇到了今天的重頭戲

咱們繼續順藤摸瓜 找到了 state.js裏 裏面有一個 initState方法 這裏初始化了Vue實例的各類方法 咱們不關心那麼多 只來着重關心一下 initData

initData先是將配置項裏的data掛到了當前Vue實例的 _data 屬性上 其實這個纔是Vue真實的屬性 爲何這麼說呢?各位看官一會就會知道 我先在這裏建立了一個簡單的Vue實例 上面所擁有的 data屬性有這些

這是當前data上所掛的數據, 咱們再返回頭來看一下源碼

這裏主要就是把遍歷全部的data 如何執行咱們今天的重頭戲 也就是 proxy方法!!

proxy方法長這樣

咱們能夠看到今天的重頭戲只有短短几行 首先 Vue是對 Object.defineProperty進行了一個封裝 但咱們仍是不難看出 進行操做的對象就是當前的 vm實例, 進行代理的屬性就是每一個傳入的key值, 最後一個對象屬性也能夠很清楚的看到 有 enumerable configurable 和 set() get()
當以前的循壞開始 傳入的值依次是 當前的 vm實例, '_data' 和'mes' 那麼執行這個函數後 是在vm實例上直接建立了一個 mes屬性 當咱們進行get操做時 return的就是 this['_data']['mes']真的寫出來就是

也不知道我說清楚了沒有..知道的朋友們權當複習 若是看到這裏仍是有不知道的童鞋 我也寫了一個小demo 你們能夠看一下

最後祝你們節日快樂~