【Vue3知識講座1】Vueの入門と核となるキーワードの解釈

先読み

デジタル管理プラットフォーム
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
許可システム - モール
個人ブログアドレス

1. Vue3 を学ぶにはどのような知識が必要ですか?

• HTML5 + CSS3 + JavaScript の基本的な知識が必要です

• Node のパッケージ マネージャーをある程度理解していること (例: npm を介してインストールされた Bootstrap、less、およびその他のプラグイン)

• Vue2やReactなどのフレームワークの知識があること（もちろん知らなくても問題ありません）
  Vue2について学びたい方はこちら

• Vue3を学ぶためにTypeScriptを学ぶ必要がありますか?

  必ずしもそうではありませんが、理解があれば自然に良くなります。本講座ではネイティブJavaScript言語を暫定的に決定し、実際の講座の進行状況に応じてTS講座を配置します。

2. このコースから何を学びますか?

• Vite ビルドツール
• Vue3 の最新セットアップ構文シュガー
• VueRouter ルーティング管理
• ピニア州の管理
• Axios Promise ベースの HTTP ライブラリ
• ElementPlus は Vue3 UI フレームワークです
• バックグラウンドサービスを構築するための NodeJS + Express (選択)
• 実践的なアプリケーション（PC、モバイル、デスクトップアプリケーション、厳選された講義）

第 1 章: Vue の概要

Vue ( /vjuː/ と発音、viewと同様) は、ユーザー インターフェイスを構築するための進歩的な JavaScript フレームワークです。これは標準の HTML、CSS、および JavaScript に基づいて構築されており、ユーザー インターフェイスを効率的に開発するのに役立つ宣言型のコンポーネントベースのプログラミング モデルを提供します。単純なインターフェイスでも複雑なインターフェイスでも、Vue はすべてを実行できます。

Vue はボトムアップの増分開発で設計されています。コア ライブラリはビュー レイヤーのみに焦点を当てており、開始が簡単であるだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。

1.1 主要なキーワード: ユーザー インターフェイスの構築

フロントエンド開発者の主な仕事は、Web サイト ユーザーにとって美しく、快適で、使いやすい Web ページを構築することです。

ビルド ツールが有効になっているほとんどの Vue プロジェクトでは、HTML に似た形式のファイルを使用して Vue コンポーネントを作成できます。これは、単一ファイル コンポーネント*.vue(ファイル、英語の Single-File Componentsとも呼ばれ、 SFCと略されます) と呼ばれます。名前が示すように、Vue の単一ファイル コンポーネントは、コンポーネントのロジック (JavaScript)、テンプレート (HTML)、およびスタイル (CSS) を同じファイルにカプセル化します。

<script setup>
    import {ref} from "vue"
    const message = ref("Hello Vue3!!")
</script>
<template>
  <div class="message">{
   
   {message}}</div>
</template>
<style lang="scss" scoped>
.message {
  color: red;
  font-weight: bold;
  font-family: "楷体","MicroSoft Yahei";
}
</style>

ご覧のとおり、Vue の単一ファイル コンポーネントは、Web 開発における HTML、CSS、JavaScript の古典的な組み合わせを自然に拡張したものです。<template>3 つのブロック、<script>、および は<style>、コンポーネントのビュー、ロジック、スタイルを同じファイル内にカプセル化して結合します。

1.2 主要なキーワード: フレームワーク

1.2.1 ライブラリとフレームワークの違い

フレームワークとライブラリの最も本質的な違いは制御です。あなたがライブラリを呼び出すと、フレームワークがあなたを呼び出します（制御の反転）

• ライブラリ: ライブラリは、開発者が使用するために提供される特定のカプセル化されたコレクションであり、特定の側面に固有のコレクション (メソッドと関数) です。ライブラリには制御がなく、制御はユーザーの手にあります。ライブラリ内 クエリに必要な関数は独自のアプリケーションで使用されており、カプセル化の観点からライブラリを理解できます。
• フレームワーク: 名前が示すように、フレームワークは、独自の特性に基づいてユーザーに完全なソリューションのセットを提供する一連のアーキテクチャであり、制御はフレームワーク自体にあります。ユーザーは、フレームワークによって規定されている特定の仕様を見つける必要があります。発達。

実はangular、vue、reactなどがフレームワーク、jQuery、underscore、zeptoなどがライブラリであり、フレームワーク内では自由にライブラリを利用することができますが、同時にフレームワークを利用せずにライブラリを利用することもできます。非常に自由で、コントロールは常に私たちの手の中にあります。ただし、フレームワークを使用する場合は、その仕様に従ってモジュール開発を実行する必要があります。

1.2.2 Vue フレームワーク

vue は、ユーザー インターフェイス (一般に vue ファミリー バケットとして知られています) を構築するためのソリューションの完全なセットを提供するため、vue の公式の位置付けはフロントエンド フレームワークです。

• vue (コアライブラリ)
• vue-router (ルーティング ソリューション)
• pinia (状態管理ソリューション)
• Element Plus (ページ UI 効果を迅速に構築するためのソリューション)

そして、vue プロジェクトの開発を支援する一連のツール:

• vite (npm グローバル パッケージ: エンジニアリングされた Vue プロジェクトのワンクリック生成 - 小さくてコンパクト)
• vue-devtools (ブラウザプラグイン: デバッグ用ツール)
• VSCode Vue3 プラグイン推奨の Vue 言語機能 (Volar)

1.3 主要なキーワード: プログレッシブ (ボトムアップ)

プログレッシブ: 機能を段階的に拡張することを意味し、すべてを一度に使用する必要はありません。

ボトムアップ設計: プログラムを設計するプロセスおよび方法であり、最初に基本的なプログラム部分を作成し、その後徐々に規模を拡大し、いくつかの機能を追加およびアップグレードすることです。実際には、プログラムを構築するプロセスです。下から上へ。

携帯電話を例に挙げると、もともと携帯電話用に設計された基本的な機能は通話とテキスト メッセージの送信でしたが、技術とインターネットの進歩に伴い、携帯電話は徐々にインターネット サーフィン、写真の撮影、ビデオの録画、さまざまなアプリケーション (ショッピング、チャット、ゲーム) をインストールします。アプリを待ちます)、これは徐々に機能を追加する進歩的なものです。

Vue では、コア機能の確保に基づいて、ルーティング、状態管理、UI フレームワーク、その他のエコシステムを追加して、指定されたビジネス シナリオのニーズを満たすように Vue の基本機能を拡張します。

1.4 コアキーワード: 宣言的

Vue の 2 つの中心的な機能: 宣言的レンダリングと応答性

• 宣言的レンダリング: Vue は標準 HTML に基づいたテンプレート構文のセットを拡張し、最終出力 HTML と JavaScript の状態の間の関係を宣言的に記述できるようにします。
• 応答性: Vue は JavaScript の状態を自動的に追跡し、変更されるとそれに応じて DOM を更新します。

拡張: 宣言型プログラミングと命令型プログラミング

• 命令型プログラミング(Imperative): 望む結果 (What) を達成するために、マシンが物事をどのように処理するか (How) に関する詳細な指示。たとえば、ケースを完了するために JS を学習するプロセスでは、操作を完了するたびに、ブラウザに命令を与えるために JavaScript を介してコードを記述する必要があります。各ステップの命令は順番に実行され、これを命令型と呼びます。プログラミング。

• 宣言型プログラミング(Declarative): 望む結果 (What) を伝えるだけで、マシンは自動的にプロセス (How) を探索します。Vue の開発プロセスでは、createApp、テンプレート テンプレート、データ データ、およびメソッド メソッドによって渡されるオブジェクトで必要なコンテンツを宣言します。これは宣言型プログラミングと呼ばれます。

  宣言型プログラミングはプログラム開発者にとってより使いやすいものであり、コア ビジネスの実装に集中できます。

1.5 中心キーワード: コンポーネント化

コンポーネント システムは、Vue のもう 1 つの重要な概念です。これは、小さく、独立した、再利用可能なコンポーネントを使用して大規模なアプリケーションを構築できるようにする抽象化です。ほとんどすべてのタイプのアプリケーション インターフェイスをコンポーネント ツリーに抽象化できます。

コンポーネント化という考え方があるからこそ、クロスプラットフォームのフロントエンドが実現しているのです。いわゆるコンポーネントはオブジェクトです。各コンポーネントは js オブジェクトです。各 js オブジェクトは、HTML、Android、iOS、またはデスクトップ上の要素にコンパイルできます。

コンポーネントをカプセル化してコードを再利用できます。

インターフェイスは Dom 構造に応じて分割されており、ツリー構造を形成すると次のような利点があります。

• 優れた再利用性: どのコンポーネントが必要でも、コンポーネントは独立しているため、そのコンポーネント (写真内の各立方体に対応) を選択して使用するだけです。
• 効率的で比較が簡単: どのデータ変更にすぐに対応できます。インターフェース内のデータを変更する場合、レイヤーごとに検索する必要はなく、対応する Dom 要素を見つけて変更するだけで、コンポーネントの番号に応じて対応するコンポーネントを見つけてデータを変更できます。

1.6 MVVMパターン

1.6.1 概要

MVVM はデータ駆動型モデルです。つまり、データとビューは双方向にバインドされており、ビューを変更することでデータを変更でき、データを変更することでビューを変更することもできます。

Vue は MVVM リアクティブ プログラミング モデルを使用して、DOM の直接操作を回避し、DOM 操作の複雑さを軽減します。

MVVM (Model-View-ViewModel) アーキテクチャでは、各 HTML ページが次の 3 つの部分に分割されます。

• View : ビューレイヤー (UI ユーザーインターフェイス)
• モデル：データ層（データの保存と追加、削除、変更、クエリなどのデータの処理）
• ViewModel : ビジネスロジック層(すべてのjsをビジネスロジックとみなせる)、MVVMコア

1.6.2 動作原理

ViewModel は MVVM の中核として、現在のページのデータ ソース (Model) とページ構造 (View) を接続します。

データ ソースが変更されると、ViewModel によって監視され、VM は最新のデータ ソースに従ってページの構造を自動的に更新します。
フォーム要素の値が変更されると、それも VM によって監視されます。変更後、VM は自動的に最新の値を更新します。モデル データ ソースと同期します。

1.6.3 利点

• 低結合。ビュー (View) はモデルとは独立して変更および修正できます。ビューモデルは別のビューにバインドできます。ビューが変更されてもモデルは変更されず、モデルが変更されてもビューも変更されません。
• 再利用性。ViewModel にいくつかのビュー ロジックを配置し、多くのビューでこのビュー ロジックを再利用できます。
• 独自開発。開発者はビジネス ロジックとデータ (ViewModel) の開発に集中でき、デザイナーはページのデザインに集中できます。
• テスト可能。インターフェイスのテストは常に困難でしたが、現在では ViewModel のテストを作成できるようになりました。

1.7 Vue 開発は仮想 DOM を使用します

従来の開発モデルであるネイティブ JS や JQ を使用して DOM を操作する場合、ブラウザは DOM ツリーの構築から始めて最初から最後まで処理を実行します。1 回の操作で 10 個の DOM ノードを更新する必要がありますが、最初の DOM リクエストを受信した後、ブラウザーはあと 9 回の更新操作があることを認識していないため、すぐにプロセスを実行し、最終的に 10 回実行します。たとえば、最初の計算後、次の DOM 更新リクエストの直後に、このノードの座標値が変化し、前の計算は役に立ちませんでした。DOM ノードの座標値の計算などはすべて無駄なパフォーマンスです。コンピューターのハードウェアは繰り返し更新されていますが、DOM の操作には依然としてコストがかかり、操作を頻繁に行うとページがフリーズし、ユーザー エクスペリエンスに影響を及ぼします。

Web インターフェイスは DOM ツリー (ツリーはデータ構造を意味します) によって構築されます。その一部が変更されると、実際には特定の DOM ノードの変更に対応します。仮想 DOM は、ブラウザーのパフォーマンスの問題を解決するように設計されています。前と同様、1 回の操作で DOM を更新するためのアクションが 10 件ある場合、仮想 DOM はすぐに DOM を操作するのではなく、これら 10 件の更新の差分コンテンツをローカル JS オブジェクトに保存し、最後にこの JS オブジェクトをアタッチします。多くの不要な計算を避けるために、DOM ツリーにコピーしてから後続の操作を実行します。したがって、JS オブジェクトを使用して DOM ノードをシミュレートする利点は、すべてのページ更新を最初に JS オブジェクト (仮想 DOM) に反映できること、およびメモリ内での JS オブジェクトの操作速度が明らかに高速であることです。 JS オブジェクトは実際の DOM にマッピングされ、ブラウザに渡されて描画されるため、パフォーマンスが向上します。

1.8 Vue3 と Vue2

以下の図に示すように、従来の vue2 ロジックは分散しており、可読性と保守性が劣っています。vue3 と比較すると、ロジックが明確で保守しやすくなっています。

Vue1.x および Vue2.x のオプション API (オプション API) の設計は、メソッド、計算済み、データ、プロパティなどのさまざまなオプションに従って分類されています。コンポーネントが小さい場合、この分類方法は明確ですが、コンポーネントが大きい場合は、この分類方法は明確です。 、コンポーネントには複数の論理的懸念事項がある場合があります。オプション APl を使用する場合、各懸念事項には独自のオプションがあります。論理的懸念事項を変更する必要がある場合は、常に上下に切り替えて 1 つのファイル内を検索する必要があります。

Vue3.x の複合 API には、この問題を解決するための優れたメカニズムがあり、特定の論理的懸念に関連するすべてのコードを 1 つの関数に入れるというものです。