1. Vue 組件創建的流程源碼分析
注冊組件第二個參數默認會調用extend,Vue.extend 使用Vue基礎構造器 產生子類
Vue.extend() 中data必須是一個函數，繼承與Vue,可以new和掛載
Vue.component("",Vue.extend({})) //傳入的是對象
這樣復用了同一個對象所以改寫為,這樣new的時候可以拿到全新的對象
因為new Fn的constructor指向的是Parent，所以Sub.prototype需要重寫
———————————————— 分割線 ————————————————————
所以在createElement，需要對組件進行處理（要區分組件和普通元素去創建虛擬節點）
判斷是不是原始的標簽 還是組件的方法
2. vue3.0(雙向綁定)源碼分析
vue3.0雙向綁定相關的模塊有reactive/effect/computed/ref，這篇文章主要聊聊我對它們的理解，以及我在編碼中遇到的問題，希望能給大家帶來幫助，首先，一張圖清弊咐來分析它們之間的依賴關系。
把數據轉化成響應式的數據，獲取/修改數據時，能數據進行劫持操作。vue3.0用的ES6的proxy，在此之前用的是Object.defineProperty。這里有兩個問題需要注意：1/proxy不會對子對象進行劫持，需要遞歸。2/新增數據時，set會執行兩次，是因為length屬性也進行劫持。
利用高階函答純數的思想，把effect弄成一個單獨可用的函數體，在函數體內，執行回調函數並在外部進行一些邏輯處理。在effect文件中，還暴露了track/trigger。當effect中，存在依賴的數據，會調用reactive文件的get方法，get方法調用track，track函數會把storeEffect中的effect用一種格式存儲起來。set方法會調用trigger，trigger會調用get存儲的effect。
依賴effect當數據改變時，觸發當卜舉前的get回調函數，當獲取返回值時，返回當前get回調函數的返回值，當設置時，觸發set回調函數傳遞最新值。這里有點需要注意，這里的有個緩存機制，獲取相同的值時，get回調函數值觸發一次，通過dirty變數實現。
綁定一個非對象類型的數據，直接通過返回對象的get/set方法實現。
項目案例
3. vue源碼分析三 -- vm._render()如何生成虛擬dom
我們在上一篇的最後講解了vm._render是生成虛擬dom的關鍵，那麼我們山鉛來看看他是如何生成的，下面是他的源碼
createElement在文逗歷好件../vdom/create-element裡面，下面是他的源碼
new Vnode 創爛山建的是一個虛擬dom，其實就是一個裝有很多屬性的對象，和真實的dom做一個映射，目的是去渲染真實的dom，那麼為什麼不直接去渲染dom，因為vue中dom不僅有create的過程，還有diff,patch的過程。為了使得diff的過程花費的時間更短，虛擬dom就出來了，下面我們來看看new Vnode的源碼
4. vue2.0源碼解析（上）
vue項目亮雀地鍵鍵信址： https://github.com/vuejs/vue
當前版本號：2.6.11
1、基本稿輪目錄結構：
1、找到initState()函數，這是初始化響應式的入口。
5. vue3源碼解讀--data響應式的處理
目錄
vue2源碼
vue3源碼
示例
源碼
上一節，我們已經看到了組件被掛塌塌載到頁面的流程。但是忽略了對options的處理。vue2中是在組件init過程中就對配置項進行了合並處理，vue3中是在組件創建即setupComponent中執行applyOptions做的這個事情
經過對組件實例的解析操作，最終拿到的dataOptions即我們實例中的data函數。可以看到，在vue3已經不允許根組件定昌衫敬義為對象了
顯然reactive即響應式實現的關鍵，順著調用關系找到createReactiveObject函數。常聽人提起的Proxy赫然立於耐慎眼前
proxy和Object.defineProperty差不多，都可以攔截對象的訪問和修改操作，那麼接下來的重點就是看下它是如何做依賴收集和派發更新的即可
當前targetType=1，使用baseHandlers做處理器，即createGetter函數。當組件render過程中將會觸發msg的訪問執行到此
可以看到，如果msg是一個對象，則會遞歸reactive。為什麼要遞歸處理呢？proxy不是已經把整個對象都代理到了嗎？
寫一個例子看一下
如果正常訪問，我沒有問題的，每次都可以正確的觸發get
如果是拿到返回值再進行訪問的話，res.c就是無效的
把第二個值也轉為Proxy後就可以了
回到正題，進入track函數
在trackEffects中完成依賴收集
同樣的，當set newValue時將執行到createSetter。這將執行trigger進行更新派發
總結
拿到options的data--視情況(如對象遞歸執行)進行reactive化--在訪問時收集依賴(ReactiveEffect)--設置值時派發更新
proxy.x相當於讓activeEffect去訂閱data的change，proxy.x = y則相當於data發布更新，通知activeEffect執行componentUpdateFn --觀察者模式
6. 手把手教你讀Vue2源碼-2
在上一篇中，我們已經學習叢廳了怎麼搭建環境和查找入口文件、vue初始化方法
這一篇，我們就來學習基本的調試方法，在上篇中，我們已經在test文件夾中創建了一個測試文件，畝虛我們在瀏覽器中打開這個文件
1. 初始化new Vue()
test1.html文件中在初始化app處打斷點，按F11走下一步查看，可以看到進入到我們Vue構造函數，調用了init方法
2. this.init(options)
同樣打上斷點，點擊下一步，會進入init方法
3. this.initMixin
在init方法，初始化了各種屬性。我們將斷點打在合並options的位置，查看一下options合並前後有什麼差別：
4. $mount
繼續，迅鄭燃將斷點打到mount方法
5. mountComponent
聲明了updateComponent，創建了Watcher
6. _render()
_render獲取虛擬dom
7. _update()
_update把虛擬dom轉為真實dom
7. Vue到底是什麼
vue是一個構建用戶界面的框架(庫),它的目標是通過盡可能簡單的api實現響應的數據綁定和組合的視圖集合。vue核心是關注視圖層,因此它非常容易學習，非常容易與其它庫或已有項目整合。vue在與相關工具和支持庫一起使用時, 也能很好地驅動復雜的單頁應用。
8. Vue源碼系列之init過程屬性方法變更圖
本文主要擾嘩消是總結在Core目錄下出來的Vue在其實例vm，原型Vue.prototype，構造函數Vue上屬性方法的變更情況，其中樹形圖從左到右為路徑/
vue不但可以在web瀏覽器上運行，也可以在移動端運行，移動端也就是weex版本，兩者區別如下圖
在web上可以分為兩個版本，runtime only版本和runtime+compiler版本，區別是後者緩知帶有模板編譯器，也就是可以將template模板編寫html轉換成render函數，而前者沒有這個功能，需要寫成render形式
另外在體積上，完整版比only版多了蘆如差不多1/2，圖中可以看到，vue.js/vue.min.js是完整版，後者是壓縮完整版基礎上的壓縮版，而vue.runtime.js/vue.runtime.min.js是runtime only版
在源碼中，完整版和only版入口不一樣
這次走的是完整版入口
而在進入core之前，在runtime/index目錄下，做出了下面的增添，也就是web版最外層的公共部分，以後就會在這基礎上修改，從而使最終文件帶有編譯器或者不帶編譯器compiler
下圖開始的就是core/index出來的vue上添加的屬性和方法，分為屬性/方法名+數據類型的組合，已經用不同顏色標記