iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Vue.js

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

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

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

[Day 11] runtime-dom——封裝操作dom元素的方法 - 1

「♪♪♪♪♪♪♪♪♪♪♪♪♪♪」——莫札特 上回書說道,我們定義了虛擬dom節點的資料結構,接下來我們就寫一個函數,將虛擬dom渲染成真實dom。 為此,我...

DAY 12

[Day 12] runtime-dom——封裝操作dom元素的方法 - 2

「故に遠くに遠くに耽美に無様に芽生えたら。」——Kanaria 上回書說道,我們在/src/runtime-dom路徑下創建了patchProp.ts檔案,...

DAY 13

[Day 13] runtime-core——render方法

「哼,哼哼哼哼哼哼哼,哈哈,啊哈哈,啊哈哈哈哈哈哈哈哈哈!」——米哈遊 上回書說道……算了沒時間前情提要了。總之就先建個文件/src/runtime-dom...

DAY 14

[Day 14] runtime-core——比對新舊虛擬dom

都看我的鐵人賽整整兩個禮拜了,還不離不棄的應該都是鐵粉了。我在文章裡偷偷吐點苦水,應該不會有人介意吧:3 以原神來比喻吧,我覺得我是像達達利亞那種類型的人。我渴...

DAY 15

[Day 15] runtime-core——渲染dom元素

不知不覺間,鐵人賽也過了一半。不過我在寫今天內容的草稿的時間點鐵人賽根本還沒開賽,所以好像也沒甚麼感慨的感覺。 我現在只想著希望正式把這篇文章發出去的時候,我不...

DAY 16

[Day 16] runtime-core——比對節點

最近剛開始學react,才學三天就想棄了……class得寫成className、取個dom元素得this.refs.current一堆點、html得寫在函數的r...

DAY 17

[Day 17] runtime-core——diff算法

「譬如為山,未成一簣,止,吾止也;譬如平地,雖覆一簣,進,吾往也。」 ——孔子 哪怕山虧一簣,也謂丘陵,望遠足矣。你們跟著我堅持到今天,走過了一半的路程,你...

DAY 17

[還是Day 17,一天兩更想不到吧~] runtime-core——最長遞增子序列 - 1

「拿起刀無法擁抱你,放下刀無法守護你。」——久保帶人 在正式開始講最長遞增子序列前先來玩個遊戲吧。 遊戲規則 我會用以下代碼隨機生成7項的陣列: const...

DAY 18

[Day 18] runtime-core——最長遞增子序列 - 2

「那是雜魚的思維。」——鹿紫雲 之前我們討論了新舊子節點(以下簡稱為新子、舊子)的比對,我們會先從頭比對,再從尾比對,確保新、舊子僅有中間不同,示意範例如下...

DAY 19

[Day 19] runtime-core——最長遞增子序列 - 3

今天是我們學習最長遞增子序列算法的第三天,我們終於要開始寫代碼了。 我假設看到這裡的你有先認真看完前兩天的內容,或許你可能看了但沒全看懂,就像去年我剛學這個算法...