ソフトウェア フレームワークのソース コードを読むことで、フレームワーク自体の動作メカニズムについて学び、フレームワークの API 設計、原則、プロセス、設計思想をより深く理解できます。何を知る必要があるか起こっていることとその理由。
Vue 3 のソース コードは、Vue 2 バージョンと比較して大幅に変更されており、Monorepo 標準のディレクトリ構造が採用され、開発言語として TypeScript が使用されます (vue2 は、Vue 2 バージョンの最後に TypeScript も置き換えられます) 2022 年 4 月。開発言語) が追加され、多くの新機能と最適化が追加されました。
1. Vue3 ソースコードをダウンロードして起動します
2023-03-31最新バージョンは V3.3.0-alpha.5 です
bash コードをコピー git clone https://github.com/vuejs/core.git
ダウンロードが完了したら、core フォルダーに入ります vue3 のソースコードは Yarn でビルドされているため、最初に Yarn をインストールする必要があります。
npm i 糸 -g
次に、関連する依存関係をインストールします
糸 --ignore-scripts
npm run dev を使用してソース コード デバッグ モードを有効にできます。完全なソース コード ディレクトリ構造は次のとおりです。
core
├─ packages
│ ├─ compiler-core // 核心编译器
│ ├─ compiler-dom // dom编译器
│ ├─ compiler-sfc // vue单文件编译器
│ ├─ compiler-ssr // 服务端渲染编译
│ ├─ dts-test //测试Typescript类型以确保类型保持为预期类型
│ ├─ global.d.ts // TypeScript声明文件
│ ├─ reactivity // 响应式模式，可以和其它框架配合使用
│ ├─ reactivity-transform // 该功能现在被标记为不推荐使用，并将从Vue核心中删除,提案已经被放弃。
│ ├─ runtime-core // 运行时核心实例相关代码
│ ├─ runtime-dom // 运行时dom相关API、属性、事件处理
│ ├─ runtime-test // 运行时测试相关代码
│ ├─ server-renderer // 服务器渲染
│ ├─ sfc-playground // 单文件组件在线调试器
│ ├─ shared // 内部工具库，不对外暴露
│ ├─ size-check // 测试代码体积
│ ├─ template-explorer // 用于调试编译器输出的开发工具
│ ├─ vue //面向公众的完整版本，包含运行时和编译器
│ └─ vue-compat //是Vue 3的一个构建，它提供了可配置的Vue 2兼容行为。
2. ディレクトリモジュール
compiler-core、compiler-dom、runtime-core、および runtime-dom のモジュールの方が重要です。
コンパイル: プログラムがコンパイルされたときと理解できます。これは、作成したソース コードがターゲット ファイルにコンパイルされる時間を指します。ここでは、コンパイルしたときと理解できます。 .vue ファイルをブラウザに読み込む .js ファイルを認識できるようにする取り組みもあります。
ランタイム: プログラムの実行時間、つまり、プログラムがコンパイルされた後、ブラウザがプログラムを開いて実行するまでの、プログラムが閉じるまでの時間として理解できます。
リアクティビティ ディレクトリも重要です。これはレスポンシブ モジュールのソース コードです。Vue 3 のソース コード全体は Monorepo (単一ウェアハウス) 仕様を採用しているため、その下の各サブモジュールは独自にコンパイルし、外部サービスを独自に提供するためにパッケージ化する必要があります。使用する場合は、require('@vue/reactivity') を使用して導入します。reactivity ディレクトリに入ると、対応する package.json ファイルが表示されます。
3. ビルドバージョン
次のコマンドを使用してビルドすると、Vue 3 のすべてのバージョンをビルドできます。
npm ビルドを実行する
ビルドされたファイルは、core\packages\vue\dist ディレクトリにあります。説明は次のとおりです。
// cjs（用于服务端渲染）
vue.cjs.js
vue.cjs.prod.js（生产版，代码进行了压缩）
// global（用于浏览器<script src="" />标签导入，导入之后会增加一个全局的Vue对象）
vue.global.js
vue.global.prod.js（生产版，代码进行了压缩）
vue.runtime.global.js
vue.runtime.global.prod.js（生产版，代码进行了压缩）
// browser（用于支持ES 6 Modules浏览器<script type="module" src=""/>标签导入）
vue.esm-browser.js
vue.esm-browser.prod.js（生产版，代码进行了压缩）
vue.runtime.esm-browser.js
vue.runtime.esm-browser.prod.js（生产版，代码进行了压缩）
// bundler（这两个版本没有打包所有的代码，只会打包使用的代码，需要配合打包工具来使用，会
让Vue体积更小）
vue.esm-bundler.js
bue.runtime.esm-bundler.js
次のコマンドを使用して選択的にビルドすることもできます。-f パラメーターの具体的な意味とその他のパラメーター構成については、core/rollup.config.js を参照してください。
# 构建运行时版本 vue.runtime.global.js
node scripts/dev.js -f global-runtime
# 构建出完整版,vue.global.js
node scripts/dev.js -f global
クライアント側でテンプレートをコンパイルする必要がある場合 (つまり、文字列をテンプレート オプションに渡すか、要素の DOM 内の HTML をテンプレートとして使用して要素にマウントする)、コンパイラが必要になるため、完全なビルド、コードが必要になります。以下のとおりであります：
// 需要编译器
Vue.createApp({
template: '<div>{
{ hi }}</div>'
})
// 不需要
Vue.createApp({
render() {
return Vue.h('div', {}, this.hi)
}
})
Webpack の vue-loader を使用する場合、.vue ファイル内のテンプレートはビルド時に JavaScript にプリコンパイルされます。最終バンドルにはコンパイラーは必要ないため、ランタイム ビルドだけを使用できます。したがって、ブラウザで Vue ページを直接開くと、直接使用できます。