導航:首頁 > 源碼編譯 > vue項目獲取組件源碼

vue項目獲取組件源碼

發布時間:2024-04-28 02:47:28

Ⅰ 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的第二個參數, 則使用剩餘參數即可

到此就圓滿成功啦!

閱讀全文

與vue項目獲取組件源碼相關的資料

熱點內容
單片機投票器 瀏覽:467
程序員那麼可愛唱嗎 瀏覽:830
手機誤刪的app怎麼恢復 瀏覽:700
java第三方加密庫 瀏覽:660
編譯代碼軟體哪個好 瀏覽:997
編譯器軟體圖片 瀏覽:880
美團專送app怎麼不接受遠單 瀏覽:833
伺服器mgmt口如何連接電腦 瀏覽:798
做程序員至少要精通幾種 瀏覽:673
個人用雲伺服器價格對比 瀏覽:257
如何遠程刪除伺服器文件夾 瀏覽:779
a9賬號如何移植到安卓 瀏覽:340
gpib介面編程 瀏覽:468
索尼recovery編譯 瀏覽:878
app後端php 瀏覽:625
中獎的app叫什麼名字 瀏覽:92
定時關機命令批處理 瀏覽:941
閃電pdf 瀏覽:642
winform原生編譯 瀏覽:337
同比提升比的演算法 瀏覽:887