Ⅰ vue3源碼分析-實現props,emit，事件處理等
>
本期來實現， setup裡面使用props,父子組件通信props和emit等 ，所有的源碼請查看
在render函數中， 可以通過this,來訪問setup返回的內容，還可以訪問this.$el等
由於是測試dom,jest需要提前注入下面的內容，讓document裡面有app節點，下面測試用例類似在html中定義一個app節點哦
本功能的測試用例正式開始
上面的測試用例
解決這兩個需求:
針對上面的分析，需要在setupStatefulComponent中來創建proxy並且綁定到instance當中,並且setup的執行結果如果是對象，也已經存在instance中了，可以通過instance.setupState來進行獲取
通過上面的操作，從render中this.xxx獲取setup返回對象的內容就ok了，接下來處理el
需要在mountElement中，創建節點的時候，在vnode中綁定下，el，並且在setupStatefulComponent 中的代理對象中判斷當前的key
看似沒有問題吧，但是實際上是有問題的，請仔細思考一下， mountElement是不是比setupStatefulComponent 後執行，setupStatefulComponent執行的時候，vnode.el不存在，後續mountelement的時候，vnode就會有值，那麼上面的測試用例肯定是報錯的，$el為null
解決這個問題的關鍵，mountElement的載入順序是 render -> patch -> mountElement，並且render函數返回的subtree是一個vnode,改vnode中上面是mount的時候，已經賦值好了el,所以在patch後執行下操作
在vue中，可以使用onEvent來寫事件，那麼這個功能是怎麼實現的呢，咋們一起來看看
在本功能的測試用例中，可以分析以下內容：
解決問題:
這個功能比較簡單，在處理prop中做個判斷， 屬性是否滿足 /^on[A-Z]/i這個格式，如果是這個格式，則進行事件注冊，但是vue3會做事件緩存，這個是怎麼做到？
緩存也好實現，在傳入當前的el中增加一個屬性 el._vei || (el._vei = {}) 存在這里，則直接使用，不能存在則創建並且存入緩存
事件處理就ok啦
父子組件通信，在vue中是非常常見的，這里主要實現props與emit
根據上面的測試用例，分析props的以下內容：
解決問題：
問題1： 想要在子組件的setup函數中第一個參數， 使用props,那麼在setup函數調用的時候，把當前組件的props傳入到setup函數中即可 問題2： render中this想要問題，則在上面的那個代理中，在 加入一個判斷，key是否在當前instance的props中 問題3： 修改報錯，那就是只能讀，可以使用以前實現的 api shallowReadonly來包裹一下 既可
做完之後，可以發現咋們的測試用例是運行沒有毛病的
上面實現了props,那麼emit也是少不了的，那麼接下來就來實現下emit
根據上面的測試用例，可以分析出：
解決辦法： 問題1： emit 是setup的第二個參數， 那麼可以在setup函數調用的時候，傳入第二個參數 問題2： 關於emit的第一個參數， 可以做條件判斷，把xxx-xxx的形式轉成xxxXxx的形式，然後加入on，最後在props中取找，存在則調用，不存在則不調用 問題3：emit的第二個參數， 則使用剩餘參數即可
到此就圓滿成功啦！