我想觀察vue文件從script標簽引入之后到綁定div.app元素發(fā)生了什么
1.創(chuàng)建一個html文件(命名為：test-vue.html)，引入vue，并創(chuàng)建一個vue實例
2.我想要觀察vue.js文件的執(zhí)行步驟，所以這里需要在vue.js文件找一個恰當?shù)牡胤酱蛞粋€斷點
為什么在這里？
這里是調(diào)用 new Vue 時執(zhí)行的入口。
在此之前 Vue構(gòu)造函數(shù) 已經(jīng)完成了初始化,如下圖。
-----------------------
最初我學習源碼是通過npm安裝的vue文件。在~node_modules/vue/src目錄下，有良好的文件組織結(jié)構(gòu).
但是這個無法直接在瀏覽器中使用。
所以我選擇了引入dist/vue.js文件。
3. 現(xiàn)在我們打開 test-vue.html ,按下 f12,刷新
4. 現(xiàn)在頁面在我期待的位置（debugger）停了下來
并且我看到我們的div.app元素的內(nèi)容是 {{title}}
說明vue的構(gòu)造函數(shù)沒有執(zhí)行完成。
5. 在這個瞬間，我觀察到 開發(fā)者工具右側(cè)面板 有一些有意思的東西
我現(xiàn)在重點看一下 Call Stack和Scope
6.?Call Stack 意思是 調(diào)用棧
我知道 棧 就是先進后出
現(xiàn)在，在調(diào)用棧中有兩個 東西：vue和anonymous
vue我知道是我們調(diào)用的 new Vue（）被推進了調(diào)用棧
那 anonymous 是什么呢？
我點擊了?anonymous 發(fā)現(xiàn)
回到了 test-vue.html文件，并且標記了 new?
我可以猜測，new 其實也相當于創(chuàng)建了一個匿名函數(shù)，并且先調(diào)用了他，而new 又調(diào)用了 Vue（）
7. 回到 call stack 點擊vue
我發(fā)現(xiàn)scope也發(fā)生了變化：從global變成了 global，closure，local
8. 我知道當前文檔的執(zhí)行停在了斷點處，當前執(zhí)行的函數(shù)是 Vue，call stack最上面的是 Vue
那scope是什么呢？
scope 是 范圍 的意思。
我知道 函數(shù)不關(guān)心自己在哪里調(diào)用，只關(guān)心自己在哪里聲明。
Vue這個函數(shù)在哪里聲明的呢？
就在當前斷點處。
為什么scope 中有三個 上下文context呢？
因為最外層當然是window 的全局環(huán)境，
第二個 closure 意為 閉包 ，說明 Vue函數(shù)的外層有一個匿名函數(shù)將它包裹起來，并形成了Vue的父級作用域context
第三個local 就是當前作用域context，就是Vue形成的context。
我點擊了每個context，觀察每個context環(huán)境下的變量，可以證實這一點。
9. closure的context
我發(fā)現(xiàn)了 Dep,Observe 在依賴收集是會用到的構(gòu)造函數(shù)。
所以他們可以在 closure 內(nèi)部的任何位置調(diào)用他們。
10. local的context
我來看一下local也就是當前Vue函數(shù)內(nèi)部有哪些變量
有 option，this
option就是調(diào)用Vue傳的參數(shù)，在Vue函數(shù)內(nèi)部，option就是一個當前context的一個變量
this 就是當前context，通常this這個在普通函數(shù)內(nèi)部沒有多大意義
但是通過new 關(guān)鍵字，this變成了一個空對象，它的__proto__等于Vue.prototype
在某個文章中指出，我們不應該直接去改變__proto__,因為這樣會導致性能問題? ??
我試著直接在scoure面板的vue.js文件中的Vue函數(shù)內(nèi)進行編輯
var a = 'a'
發(fā)現(xiàn) scope的local的局部變量表中對了一個我剛才聲明的a
11. 現(xiàn)在 按f11，到?this._init(options); 這一步，注意 call stack
12. 按f11，進入 _init 函數(shù)聲明的地方
這時call stack 又推入了一個函數(shù) _init
這個時候，scope應該會在_init函數(shù)（local），下還有一個 closure（閉包：initMixin）。
但是被chrome省略了，下圖可以證實這一點。
我在initMixin內(nèi)部聲明了一個變量之后，這個initMixin閉包才顯示出來。
13.? 觀察_init函數(shù)做了什么
進來后在scope local可以看到
這里的this指的 我最初new Vue產(chǎn)生的實例對象。
為什么在沒有對Vue實例做任何操作的情況下，this會有$data,$isServer等半透明的屬性？
這是因為 Vue.prototype擁有這些屬性的get和set函數(shù)。
