「千里之行，始於足下。」——老子

廢話 前言

去年的這個時候，我剛完成培訓機構的學業，和一同奮鬥過來的夥伴們一同為今後的求職做準備。當時，我們無不為了盡可能提升錄取的機率，而努力充實著自己。有些人選擇學習更多陌生技術，也有些人上leetcode刷題，只有我選擇了這條最為崎嶇的路——Vue3源碼。

為什麼學源碼

在我主管面試完我後，我的前輩們跟主管打聽了有沒有令他印象深刻的面試者。「有個能單手拍手的人，一上來就跟我聊Vue3源碼。」我想通過我主管的評價，足以證明Vue3源碼是僅次於單手拍手的高級才藝。除此之外，學習Vue3源碼還能帶來以下好處。

1. 算法的思想及應用

想卷算法的前端工程師應該不在少數，但學了算法的你真能把算法活用在前端開發上嗎？除非你的事業是為公司或社群開發庫乃至框架，不然就串串api、做做簡單的交互效果還真用不到甚麼算法，了不起就是LRU算法快取api或2進制儲存多選選項節約資料庫空間的那種程度。
但在Vue3源碼中能看到最長遞增子序列，那種正常人類根本想不到的奇蹟操作。

2. 對Vue更透徹的理解

請先看過以下代碼：

<template>
    <div>{{ time }}</div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
const time = computed(() => new Date())
</script>

你認為畫面上的這個time會時時更新嗎？我想只要是位了解computed回調的觸發條件的工程師，都能毫不猶豫地回答我「不會」。但你相信嗎，我還真就見過有大型專案開發經驗，卻沒能答對這道題的工程師。
不論你是幾年經驗的資深前端，你都不能保證你在Vue的學習上沒有任何觀念漏洞。唯有學習Vue的實現原理，才能真正掌握這門技術。

3. 一些你可能這輩子都沒見過的語法

譬如ES6的WeakMap、Symbol型別以及位元運算等等，這些js的語法你都已經會了嗎？如果上述有任何一個語法對你來說是陌生的，源碼的學習都能讓你獲得全新的知識。

4. 大佬的編程風格

如果你和去年的我一樣，都是剛完成前端的學業，準備初入職場的小萌新，我敢打賭你的變數命名、方法封裝、模塊拆分都會令同事頭痛不已。當然這不是你或你的老師的錯，畢竟你把開發所需的知識塞進腦子裡就已竭盡全力了，你的老師理應沒有餘裕再把這些花裡胡哨的東西展示給你看。

當然，學習源碼的好處決不限於以上所述，學習源碼甚至能改善一個人的性格——透過了解自己的渺小從而成為一個謙遜的人。所以學習源碼吧！你不會為此刻的選擇後悔的。

學習規劃

如何學習源碼

無論是學習任何技術，找到一個適合自己的教材都是重要的。但如果這項技術是源碼，你需要的教材可能不只一份。
去年的我在b站找了兩位老師的影片，對照著尤雨溪的github，每日10小時以上的高強度學習持續了長達一個月，才好不容易復刻出了一個功能極簡版的Vue。這次鐵人賽我想整理一份學習筆記，希望它們能成為有緣人掌握Vue3源碼的其中一份材料。

預計學習的知識點

計畫上，我們要學習以下知識點：

• 搭建環境
  我們會先用webpack搭建開發環境，畢竟沒有Vue哪來的vue cli呢XD
• composition api
  有了開發環境以後，我們會從最簡單的composition api下手，講述Vue3如何利用Proxy對象搭配尤雨溪團隊提出的effect函數，實現依賴收集以及數據驅動視圖。
• 虛擬dom
  數據更新視圖，所謂更新視圖可不是直接把innerHtml替換了就完事了。重新渲染dom元素是一件耗費效能的事，因此尤雨溪團隊提出diff算法，來比較數據更新前後的dom元素有哪裡不同，而在內存中供diff算法比對差異的，正是虛擬dom。
• diff算法
  當我們將真實dom元素轉換成虛擬dom並放入內存，我們便能透過這套Vue源碼中最著名的算法，來比對重新渲染哪些dom元素，能以最少量的dom元素操作，把新的數據放上畫面。
• ast抽象語法樹
  最後，將template中的模版轉換為虛擬dom的技術，就是ast抽象語法樹。

但實際上因為鐵人賽只有30天，不太可能把所有的知識點都講完講清楚，所以就講多少算多少ㄏ