導航:首頁 > 源碼編譯 > 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項目獲取組件源碼相關的資料

熱點內容
演算法戰書籍 瀏覽:575
卸載網路伺服器是什麼意思 瀏覽:123
菜鳥app的收貨地址在哪裡 瀏覽:488
伺服器配什麼顯卡 瀏覽:369
動態壁紙不動了是怎麼回事安卓 瀏覽:412
申萬宏源app哪裡看總盈利 瀏覽:133
單片機測電感電容 瀏覽:165
android在子線程中更新ui 瀏覽:694
演算法分析師面試有什麼要求 瀏覽:994
容器演算法大全圖解 瀏覽:69
cad後置命令失效 瀏覽:692
殺手阻擊存檔文件夾是哪一個 瀏覽:212
禁書pdf 瀏覽:920
沒用app語音智能提醒怎麼設置 瀏覽:502
linuxwiki安裝 瀏覽:680
隔牆演算法 瀏覽:174
安卓手機為什麼app不通知 瀏覽:550
申請雲伺服器購買費用 瀏覽:115
雲伺服器鏡像下載到本地 瀏覽:4
電腦文件夾名有橫杠 瀏覽:154