iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Vue.js

淺談vue3源碼,很淺的那種 系列

真的就淺談,不深講,真的,相信我。

參賽天數 19 天 | 共 31 篇文章 | 22 人訂閱 訂閱系列文 RSS系列文
DAY 19

[Day 20] runtime-core——完成渲染dom

操你的這禮拜忘記發鐵人,斷了…… 不憋了,草稿全發了吧。 所以讓我們回到/src/runtime-core/renderer.ts,寫下最後一段邏輯吧。 目前我...

DAY 19

[Day 21]h函數

各位親~愛的讀者們!聽我說!聽我炫耀一下!我!我我我!就!在!昨!天!就在寫這篇草稿的時間點的前一天!我升官加薪啦~~~~~ 嘿嘿~加薪的感覺真~好。 好我炫耀...

DAY 19

[Day 22]總整理

我們來檢驗一下這幾天所學的東西是不是真的好用吧。 先在/src/index.ts寫下以下代碼: import './assets/css/style.less'...

DAY 19

[Day 23]ast抽象語法樹 - 1——前置準備

「你學姊離職以後我想了很多。她是一個很有責任感的人,時常加班到9、10點。我原本以為我陪著她一起加班就好,但直到她離開,我才意識到她可能已經累積了很多疲勞。」寫...

DAY 19

[Day 24]ast抽象語法樹 - 2——前置準備及明確目標

書接上回,我們要接著往/src/ast/parse.ts的parse方法的方法體內寫東西。 來明確一下我們首先需要甚麼吧。遍歷嘛,指針是需要的;需要先把上標籤挑...

DAY 19

[Day 25]ast抽象語法樹 - 2——解析標籤

或許有人會想說我這兩天一直在鐵人賽跟離職的學姊示好,就不怕被公司的人看到嗎?哎這我還真不怕,畢竟咱公司紀律嚴謹,上班時間逛不了論壇,下了班就該好好休息哪還看我的...

DAY 19

[Day 26]ast抽象語法樹 - 3——解析文字

解析屬性還是比較複雜的,需要考慮一些特殊的情況,所以我們先看比較簡單的解析文字。 解析文字需要注意的只有一點,就是文字裡面可能會藏著表達式(例如放在templa...

DAY 19

[Day 27]ast抽象語法樹 - 4——解析屬性

為了解析上標籤中的屬性,我們新建/src/ast/parseAttr.ts文件,並寫下以下代碼: export default (attrsString: st...

DAY 19

[Day 28]ast抽象語法樹 - 5——v-bind與style

v-bind和昨天提到解析內文中的{{ 表達式 }}很像,都是裡面藏著表達式,要把它換成值並觸發get做依賴收集。 const parseAttrData =...

DAY 19

[Day 29]最後收尾!!

終於我們vue3源碼的學習來到尾聲,我們可以來測試看看這幾天寫的東西是否能全部串到一起。不過當我正打算要串到一起時,我發現之前有個小地方沒有寫好,請先跟我一起打...