The New Vue

Evan You Nov 2021 @ VueConf Toronto
今回の会議では、Even Youは、新しい構文、ドキュメント、構築ツール、devtools、TS/IDEなど、新しいVUE 3体験について話しました.
Vueが初めて世界に紹介された時はLibraryでした.これはcdnでブラウザにインポートしてロードし、すぐに実行できる単一のスクリプトです.しかし、時間が経つにつれて、Web開発はより良い方向に発展し、フレームワークの分野で安定した地位を占めている.
frameworkが実行するのはAPIsだけではありません.
Build tooling
IDE support
Devtools
Documentation
Routing, State Management...
フレームワークは、ページに含まれる単一のスクリプトよりも多く作成されます.vue-cli、webpackを使用してプロジェクトを整理したり、Vetur(https://vuejs.github.io/vetur/)などのIDEツールを使用してVSコードのVueをサポートしたりすることができます.Devtoolsや広範な公式ドキュメント、ルーティング、ステータス管理など、多くの機能があります.
2020年にVUE 3が発売されたとき、VUE.jsのコア部分の更新に加えて、他のフレーム層に重点を置いて、新しいフレーム層を作成します.

New Build Toolchain

Vite

新しいビルドツールViteはEven Youが誇るコミュニティプロジェクトです.
Viteは依存項目とソースコードを2種類に分けて開発サーバを起動し,サーバの稼働時間が遅いという問題を解決した.
JSから他のファイルをインポートまたは内部エクスポートする方法としてはCommonJS、AMD、ESMなどがあり、ViteはES 6に追加されたモジュール機能ESMを使用する.
ESMを提供するブラウザは次のとおりです.
https://caniuse.com/es6-module-dynamic-import
Native ESM(正式ECMAScriptモジュール)を使用してソースコードを提供します.Viteはcss、Vueコンポーネントなどのコンパイルを必要とし、より多くのソースコードを変更するにはNative ESMを使用して提供されます.ブラウザは滑らかです.
既存のバンドルパッケージを使用すると、コンテンツを変更しないバンドルパッケージの開発に時間がかかります.ViteのプリバンドルはBuilder領域の新しいツールesbuildを使用しています.Goで作成したesbuildは、webpack、packageなどの既存のバンドルパッケージよりも10～100倍速い開発経験を提供しています.
既存のバンドルパッケージは、ソースコードを更新するときに再バンドルする必要があります.サービスが大きいほど、ソースコードの更新時間も長くなります.しかし、ViteはパッケージをバンドルするHMRではなくESMを使用することをサポートしています.変更されたモジュール部分のみを交換し、ブラウザでモジュールを要求された場合は、交換されたモジュールのみを転送します.プロジェクトの発展に伴い、減速ではなく迅速を維持します.
Webpackと比較して、Vueは構成オプションを非表示にすることなく、すぐに最小限の構成に保つことができます.
プロジェクトでは、ViteはVue自体のために作成されますが、実際にはフレームワークに限定されません.最近では、VUEとは完全に独立したプロジェクトであり、ReactでもViteがよく使われている.
新しいプロジェクトを開始するときにViteをお勧めします.VUE 2とVUE 3の両方が提供され、vue-cliにも提供されます.

新しいIDEツール

Volar

最近、VUEとTSを同時に使用するユーザーが増えている.特に、VUE SFCにおいてTSサポートのために作成されたVolarは、テンプレート式にtsxを提供する.最新の構文:

上図に示すように、script領域で定義されたcount定数はtemplate領域でもタイプフィルタリングされます.

上の図は、テンプレート領域で使用する構成部品にPropsが必要かどうかを確認します.

また,propsのエラータイプがオーバーフローした場合にもチェックを行う.スロットロックも可能です.

TS対応の新しいCommand Line

vue-tsc

IDE plugin VolarのVue 3コマンドラインタイプ-追加ツールを確認します.
Vue SFCとTSファイルを一緒に管理できるtsc Rapperです.
Vue SFCの場合.dts定義を作成することもできます.

新しいステータス管理プラグインを推奨

Pinia

Vuexはまだ必要ですか?SSRがない単純な場合はreactive()オブジェクトで操作する必要があります.
以下の場合、Piniaを使用することをお勧めします.

Vuex-next(合成APIとの連携が必要であるという考え方)に基づく設計

より軽くて簡単

タイプ-セキュリティストレージ(時間形式のセキュリティストレージ)

Devtools統合

コード剥離フレンドリー

SSR

をサポート
次のリンクはPiniaに関する文章です.
https://eggplantiny.github.io/blog/articles/pinia-a-new-statement-manage-plugin/

mutations 는 더이상 없음.
Typescript 를 지원하기위해 더이상 복잡한 래핑을 하지 않아도 된다.
아주 빠르고 정확한 autocompletion
namespaced modules 은 바이바이 🙋‍♂️
devtools 공식 지원

新しいDevtools拡張

Vue Devtools 6.0 (beta)

このバージョンでは、Vue 2とVue 3の両方が動作します.

基本イベント、コンポーネントイベント、パフォーマンスプロファイル、ライブラリデータムイベントに統一された時間軸を提供します.piniaなどのライブラリプラグインを時間軸に追加することもできます.

新しいDefault推奨事項

Tooling : vue-cli -> create-vue

IDE : Vetur -> Volar

State Management : Vuex -> Pinia

新しいComponentAPI DX

script setup

VUE 3.2からサポートが開始される.コンビネーションapiの使用を大幅に削減しました.sugar構文機能.

新しいDocumentation

正式な書類

最後に、これらのすべてを正しく結びつけるために、私たちは本質的にこれらの新しいベストプラクティスに一貫したアドバイスと新しいオプションを提供しています.そのため、それらを組み合わせる新しいドキュメントが必要です.

https://vuejs.org/
また、新しいデザインのドキュメントと暗いモードもサポートされています.VitePress(Vue 3+Vite SSG)に再構築します.

推奨例と最適例が更新され、左上隅にあるAPI Preferenceスイッチを使用して、Option-base APIとComponentAPIでAPIスタイルを選択してドキュメントの内容を表示する方法を学習するように変更されました.

公式ファイルハングル翻訳参加イベント

Vue.js 3は標準版に変更され、上記のように英語版の正式なドキュメントに変更されました.Vue.js公式ファイルのハングル翻訳は以前のバージョンのドキュメント翻訳で、現在最新の英語版公式ファイルをハングルに翻訳する活動が行われています.興味のある方はSlackのVuejs韓国語ユーザーパーティコミュニティに参加し、#translate-v 3-docチャンネルに入って活動してください.GitLocalizeを使用して翻訳し、Githubで用語辞書と連絡先ページを使用します.

SnakeのVue.js韓国語ユーザー会議コミュニティ招待リンク:https://join.slack.com/t/vuejs-korea/shared_invite/zt-fkxu93sz-sl_MHu08ZjNNvVVgxa_GJQ2

翻訳関連ハブ:https://github.com/vuejs-kr/docs-next/2

翻訳責任者:naruas(slackの招待とコンサルティング)

参照ビデオ:https://www.youtube.com/watch?v=2KBHvaAWJOA