這是一個以 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>...