鐵人檔案
這是一個以 Vue 3 響應式系統為核心的學習與探索紀錄的系列文章。
我嘗試從零開始，重現 Vue 3 的響應式機制，並在過程中分享自己的思考與整理過程。希望能藉由這個系列，讓自己更深入掌握 Vue 3 的底層原理。
你是否有過對 Vue 的響應式系統感到疑惑的地方？當我們在程式碼中修改一個變數時，畫面上的內容就會自動更新。這個方便快速的背後機制到底是什麼？ 了解這個底層邏...
前言 Vue 3 的原始碼由多個模組構成，除了我們常用的核心功能外，還包含了響應式、工具函式等多個獨立模組。為了模擬 Vue 官方的開發環境，管理這些分散的模...
在正式開始實作我們自己的響應式 API 之前，我們先建立一個簡單的測試環境，來觀察 Vue 官方 ref和effect的實際情況。先在packages/rea...
const count = ref(0) effect(() => { console.log('count.value ==>', cou...
在昨天，我們建立了響應式的基本運作模式。在繼續深入之前，要先了解 Vue 內部用來優化效能的一個核心概念：資料結構。Vue 3 的響應式系統之所以效率高，內部...
import { ref, effect } from '../dist/reactivity.esm.js' const count = ref(0)...
我們的程式碼已經可以運作，但RefImpl 同時處理資料儲存和鏈表管理，而且不好擴充，所以需要調整一下程式碼。雖然我們前幾章的程式碼已經可以正常運作，但它存在...
今天我們來探討一個棘手的邊界情況：巢狀 effect。 當一個effect內部又定義了另一個effect 時，我們的系統會怎麼運作呢？ import { re...
到目前為止，我們的 effect 會在依賴的資料發生變化時，會立刻重新執行。這種簡單直接的模式在很多情況下都有效，但當遇到密集且連續性的資料變更時，它可能會引...
DOM 互動 我們的響應式系統經過前幾天的努力，已經做得差不多，感覺可以加上一下 DOM 的互動，來進行簡單的測試。 <!doctype html>...
