Vue3.0來臨以前，你能夠作些事兒

更新

• 代碼更新成圖片了， 代碼塊雖然沒有高亮，感受看着沒有代碼塊方便呢？ 若是你們看着不舒服我再改回去

前言

興趣是最好的老師，對我等猿類更是如此。看了VueConf裏面透露的API。只有一個感受，像風同樣自由～。特別的想盡快體驗一下新版本的，也想過在Vue2.0的基礎上模擬一下～！大佬與個人不一樣就是我想的時候，已經把這件事作了～。那麼在Vue3.0以前咱們來解讀下大佬的源碼，擴展下知識，爭取早日...

---

主角 vue-function-api

github: github.com/vuejs/vue-f…

文章的主要內容就是解讀下這個庫的源碼。該倉庫使用typescript編寫，因此讀這篇文章以前，你須要：

1. typescript的基礎知識
2. 對vue有深刻一些的瞭解
3. 一點耐心，由於我可能表達的不夠清楚

---

進入正題

建議對照源碼，跟我一塊兒去看這個有意思的lib

插件初始化

這裏須要你瞭解vue插件的初始化過程

帶着問題1，咱們先來看install方法的實現

• 關於Vue.config.optionMergeStrategies.setup不理解的，能夠看下相關的文章。我這裏舉個簡單例子：開發過程當中，使用mixin方式，對mounted生命週期處理事後，在組件中又用到mounted,你會發現mixin的和組件中的mounted內容都執行了，而不是被組件中的覆蓋了。這就是Vue.config.optionMergeStrategies的做用。
• 看到問題2時，問題1也就迎刃而解了。vue插件初始化時，第一個參數是vue，第二個是個options對象，而傳入的mixin纔是這個插件的核心之一，若是做爲options傳入，感受怪怪的～，因此通過處理後的install方法更合適一些。

繼續看mixin這個方法幹了什麼？解決問題2

咱們發現mixin裏面，只是劫持了SetupHookEvent, 校驗了setup是否正確， 同時在beforeCreate裏面混入了waitPropsResolved方法

記住問題3，咱們繼續向下看waitPropsResolved這個方法：

• 咱們先來看這個方法裏面的 safeRun方法幹了什麼

在safeRun裏面：使用watch包裝了一下傳入的initSetup方法，而後執行這個包裝後的方法，這裏暫且忽略watch的做用，一會咱們猜想下watch的做用

• 接下來看waitPropsResolved的執行過程：

1. 若是methods不存在，set一個方法， 觸發SetupHookEvent，而後捕獲這個set事件，執行safeRun方法
2. 若是methods是一個空對象（也就是沒找到第一個方法），set一個方法， 觸發SetupHookEvent，而後捕獲這個set事件，執行safeRun方法
3. 若是methods裏面存在方法，劫持第一個方法，當這個方法被複制的時候，執行safeRun方法

問題4: 爲何要觸發觸發SetupHookEvent後，再執行safeRun?

結合waitPropsResolved的名字，我猜想是這樣作能保證props已經準備好了，由於setup方法是接受一個props參數的。以上三條有一個共同點，都是在捕獲到方法被賦值以後，纔去執行safeRun。因此這裏的結論是，當方法被賦值時，props確定已經準備就緒了。（姑且這麼認爲，這裏我也沒作深刻的研究，有不妥的地方，歡迎指正，歡迎討論）

問題5: 爲何傳入的initSetup方法要使用watch包裝一下呢～，而不是直接執行initSetup？

• 咱們先看看watch方法，initSetup方法是被包裝成() => { initSetup(vm, props) },做爲第一參數source傳入的，咱們盯住這個source參數

• 繼續看createSingleSourceWatcher

咱們發現這裏把source換了個名字getter,交給了vue.$watch方法處理了～， 這個方法咱們看vue的文檔就行了。

咋滴。懵了吧？先總結一下，看看插件的執行順序。咱們再繼續看initSetup方法。

• 插件初始化時，給vue全局混入一個beforeCreate方法
• beforeCreate方法裏面執行waitPropsResolved方法
• waitPropsResolved方法裏面保證props就緒之後，把initSetup方法交給watch方法
• watch方法再把() => { initSetup(vm, props)交給了vue.$watch了

這樣咱們就看出來這個插件的核心，是依賴vue.$watch，只要props有變化，就執行一次initSetup,咱們繼續看initSetup方法。

• 執行組件的setup方法
• 處理返回的object，Wrapper類型的就是經過 value處理的值，其餘的調用setVmProperty設置在vm上
• 組件上就能夠愉快的使用了

這裏留個小尾巴，沒有講解value方法，感興趣的能夠本身去研究研究～

---

學習源碼的過程

該插件的邏輯很清晰，學習的源碼就沒上傳github，說下我學習的過程，因爲這個插件是使用ts編寫，因此，我使用vue建立了一個ts的項目，把這個插件的源碼導入到項目中，經過引用本地的插件，一點一點的分析源碼。喜歡的經過學也能夠這樣試試，經過log，斷點調試，對於理解源碼很是有幫助。

---

總結

• Vue3.0以前，用這個插件先過個癮。
• 雖然3.0裏面的實現原理確定不是這樣的，能夠經過學習這個插件的源碼，提高下我的能力
• 就寫這麼多吧， 歡迎交流，指正～
• github: github.com/Kntt