README_JP.md

English / 日本語 / 中文

Mini Vue

このリポジトリは Vue3 の学習を深めるために、TDD（テスト駆動開発）と TPP（変換優先原則）に基づいて、Vue3 の簡略版を実装しています。

ここでノートを見ることができます。

ノートには、このリポジトリの実装過程での考えや重要な知識点が記録されています。

🧐 ぜこのプロジェクトを作成したのか

Vue3 を深く学ぶためには、Vue3 のソースコードを読む必要があります。

しかし、Vue3 のソースコードには、エッジケースや互換性のためのロジックが多く含まれており、読むのが難しくなっています。

私たちはコアロジックに集中すべきで、このリポジトリの目的は Vue3 のソースコードからコアロジックだけを抽出し、核心部分のみを残すことです。

🛠️ クイックスタート

# リポジトリをクローン
git clone https://github.com/NansenHo/mini-vue.git
cd mini-vue

# パッケージをインストール
pnpm install

# 単体テストを実行
pnpm run test-unit

# e2eテストを実行
pnpm run test-e2e
pnpm run test-e2e:open

# ビルド
pnpm run build

🧩 Example の開き方

Server を使用して example/* ディレクトリ内の index.html ファイルを開くだけです。

Live Server の使用を推奨します。

💻 テックスタック

• TypeScript
• Vitest
• Cypress
• Rollup

📌 タスク

runtime-core モジュール：

• コンポーネント型をサポート
• エレメント型をサポート
• proxy をサポート
• render 関数内で setup から返されたオブジェクトを取得可能
• $el API をサポート
• props の初期化（event を含む）
• 基本的な slots をサポート
• コンポーネントの emit をサポート
• setup 関数が props と context にアクセス可能
• provide / inject をサポート
• getCurrentInstance をサポート
• テキスト型ノードをサポート
• props の更新を実装
• nextTick を実装
• watchEffect をサポート

reactivity モジュール：

• reactive を実装
• ref を実装
• track で依存関係を収集
• trigger で依存関係をトリガー
• effect が runner 関数を返す
• effect.scheduler をサポート
• effect.stop をサポート
• isReadonly をサポート
• isReactive をサポート
• ネストされた reactive をサポート
• ネストされた readonly をサポート
• isRef をサポート
• unRef をサポート
• proxyRefs をサポート
• computed を実装

compiler-core モジュール：

• インターポレーションを解析
• エレメントを解析
• テキストを解析

参考リンク

• cuixiaorui/mini-vue
• Vue.js の設計と実現
• vuejs/core
• Vue.js Contributing Guide