VUE3開発ノート

日次1

1. プロジェクト構成と主要ファイル

プロジェクトフォルダ構造：

主要ファイル：

2. Vue2との変更点

setupオプションの記述方法と実行タイミング

ライフサイクル図：

コンポーネントがレンダリングされる際、setup関数が最初に実行され、beforeCreateより前で自動的に呼び出されます。

構文糖衣（Syntax Sugar）：コード量を削減

まとめ：

3. コンポジションAPI -- reactiveとref関数

reactive（）

機能

核心手順

ref（）

機能

核心手順

refで作成されたリアクティブデータを変更するには.valueを使用する必要があります。例を示します。

まとめ

4.computed計算プロパティ関数

まとめ

5.watch関数

機能：一つ以上のデータ変更を監視し、変更時にコールバック関数を実行します。

追加パラメータ：1.immediate(即時実行), 2.deep（深層監視）

基本的な使用方法 - 単一データの監視

基本的な使用方法 - 複数データの監視

コード処理

immediate

deep

オブジェクトの特定プロパティを変更した場合、watchはその変更を監視しません。deepを有効にすることで監視できます。

オブジェクトの特定プロパティのみ監視

一般的なケースではdeepを有効にしないでください。パフォーマンスに影響を与える可能性があります。

Vue3のライフサイクルAPI（オプション形式 vs コンポジション形式）

まとめ

コンポジションAPIにおける親子間通信

基本的な考え方

実装コード

コンポジションAPIにおける子から親への通信

基本的な考え方

実装コード

まとめ

日次2

テンプレート参照の概念

ref識別子を使用して実際のDOM要素やコンポーネントインスタンスを取得します。

使用方法（DOM取得の場合、コンポーネントも同様）

コード実装

DefineExpose()

まとめ:

コンポジションAPI -- provideとinject

機能と使用場面

層ごとの通常データの伝達

コード実装

層ごとのメソッドの伝達

まとめ

プロジェクト

リストレンダリング

実装コード

上記のasync と await は同期非同期リクエストです。

ここでのasync awaitは非同期ですが、リクエスト応答後に処理を続行します。

注意事項

削除機能

コード実装

上記のrowはidを取得しており、el-plusの具体的な内容に基づいています。

編集機能

1. モーダルを開く（子コンポーネントインスタンスを取得し、メソッドを呼び出すかプロパティを変更）

コード実装

最初にモーダルが表示されなかったのはdefineExposeが導入されていなかったためです。動画講義では導入されていませんでした。今後は注意してください！

2. データの戻り（詳細インターフェースを呼び出す／現在行の静的データ）

コード実装

3. データの更新

コード実装

日次3

axios設定

axiosとは

コード実装

テストインターフェース

まとめ

プロジェクトルーティング設計

コード実装

カテゴリページとデフォルトのHomeページのルーティングを設計

コード実装

2段階ルーティング出口

まとめ

静的リソース初期化

画像リソースとスタイルリソース

設定後、main.jsでスタイルファイルをインポートする必要があります。

scssファイルの自動インポート

自動インポートの理由

手動設定を省略し、プロジェクト起動時に直接使用可能になります。

layout-静的テンプレート構造の構築

まず3つのセクションを作成

メインページで設定

Layoutフォントアイコンの導入

導入方法

コード実装

アリババアイコンライブラリを導入

1次ナビゲーションのレンダリング

コード実装

Layout固定ナビゲーションインタラクション試験

スクロール距離を取得するためにVueUseプラグインをインストールする必要があります。インストールコマンドは npm i @vueuse/core です。

検索 useScroll

コード実装

Layout--Piniaによる重複リクエストの最適化

最適化の理由

実装コード

日次4

Home全体構造の構築とカテゴリ実装

Homeモジュールのエントリーコンポーネントでインポートしレンダリング

実装コード

<script setup>
import HomeCategory from './components/HomeCategory.vue'
import HomeBanner from './components/HomeBanner.vue'
import HomeNew from './components/HomeNew.vue'
import HomeHot from './components/HomeHot.vue'
import homeProduct from './components/HomeProduct.vue'
</script>

<template>
  <div class="container">
    <HomeCategory />
    <HomeBanner />
  </div>
  <HomeNew />
  <HomeHot />
  <homeProduct />
</template>

Home-bannerスライドショー機能実装

まずbannerスライドショーインターフェースを導入

Home内のコード実装

Homeパネルコンポーネントのカプセル化

場面説明

コンポーネントカプセル化

コード実装

まとめ

Home-新鮮な商品と人気商品の実装

新鮮な商品の実装

コード実装、まずインターフェースを定義

その後、新鮮な商品ページに移動し、HomePanelをインポート

HomePanelは既にカプセル化されているため、そのまま使用できます。

人気商品も同様で、公式資料からインターフェースとテンプレートをコピーしてください。

Home画像遅延読み込み

場面とディレクティブの使用方法

実装のアイデアと手順

コード実装

Home-遅延読み込みディレクティブの最適化

最適化の理由

実装コード

重複監視問題

Home-Product製品リストの実装

Product製品リスト

コード実装、遅延読み込みを使用することを忘れないでください。

Home-GoodsItemコンポーネントのカプセル化

カプセル化方法

コード実装

1次カテゴリ-全体認識とルーティング設定

コード実装

1次カテゴリ-パンくずナビゲーションのレンダリング

実現効果

コード実装（エラーは無視）

1次カテゴリ-bannerスライドショーの実装

カテゴリスライドショーの実装

コード実装

1次カテゴリ-アクティブ状態の表示とカテゴリリストのレンダリング

アクティブ状態の表示

コード実装

カテゴリリストのレンダリング

1次カテゴリ-ルーティングキャッシュ問題の解決

ルーティングキャッシュ問題とは

この方法ではbannerが重複してロードされます。

まとめ

1次カテゴリ-ロジック関数による業務分割

概念理解

実装ステップ

核心思想のまとめ

日次5

2次カテゴリ-全体認識とルーティング設定

コード実装

2次カテゴリ-パンくずナビゲーションの実装

インターフェース準備

/**
 * @description: 2次カテゴリリストデータを取得
 * @param {*} id カテゴリID 
 * @return {*}
 */

export const getCategoryFilterAPI = (id) => {
  return request({
    url:'/category/sub/filter',
    params:{
      id
    }
  })
}

コード実装

2次カテゴリ-商品リストの実装

インターフェース準備

/**
 * @description: ナビゲーションデータを取得
 * @data { 
     categoryId: 1005000 ,
     page: 1,
     pageSize: 20,
     sortField: 'publishTime' | 'orderNum' | 'evaluateNum'
   } 
 * @return {*}
 */
export const getSubCategoryAPI = (data) => {
  return request({
    url:'/category/goods/temporary',
    method:'POST',
    data
  })
}

コード実装

絞り込みパラメータの追加によるフィルタ機能実装

コード実装

リストの無限ロード

コード実装

日次6

2次カテゴリ-カスタムルーティングscrollBehavior

カスタムルーティング動作とは、新しい2次ページに切り替える際に、スクロールバーが以前の位置ではなく最上部に移動するようにすることです。

コード実装

詳細ページ-全体認識とルーティング設定

ルーティング設定（2次カテゴリの下）

コード実装

詳細ページ-基本データのレンダリング

基本データのレンダリング

エラーの原因（コメント参照）

解決方法としてv-ifを選択しましたが、チュートリアル通りに書くとエラーが出ます。

brandの後ろに?を追加する必要があります。brandのnameを取得しているため、brand全体ではありません。?を用いる場合はすべてに適用する必要があるため、v-ifの方が簡単です。

その後、ウェブ構造に従って対応データを置き換え、動的に表示します。

画像の反復処理

詳細ページ-ホットリスト領域の実装

Hotホットリストコンポーネントのカプセル化

基本データの取得とレンダリング

インターフェースのカプセル化

/**
 * ホット商品を取得
 * @param {Number} id - 商品ID
 * @param {Number} type - 1は24時間人気榜、2は週間人気榜
 * @param {Number} limit - 取得数
 */
export const fetchHotGoodsAPI = ({ id, type, limit = 3 }) => {
  return request({
    url:'/goods/hot',
    params:{
      id, 
      type, 
      limit
    }
  })
}

実装コード

モジュール実装全体の分析

異なるタイトルの対応

インターフェースファイルのパラメータに基づいて引数を渡します

* @param {Number} type - 1は24時間人気榜、2は週間人気榜

コード実装

異なるリストコンテンツの対応

type: 1をtype: 2に変更

詳細ページ-画像プレビューコンポーネントのカプセル化

コンポーネント機能分析

小画像切り替えで大画像を実現

アクティブなindexを維持

マウス移動によるスライダー追従

機能分解

スライダー追従の実装 - マウス移動

スライダー追従の制御

コード実装

日次7

マウス移動による拡大鏡効果の実装 - 大画像の実装

実装コード

上記の画像パスの0を置き換えることで動的な画像になります。

コンポーネントpropsの適合

実装コード

//propsで画像リストを適合
defineProps({
  imageList:{
    type: Array,
    default:()=>[]
  }
})

そして

表示画像をプロパティバインディングに変更

まとめ

詳細ページ-SKUコンポーネント

SKUの概念

SKUコンポーネントの使用

コード実装

まず資料からXtxSkuファイルパッケージをインポートし、それから

詳細ページ-共通コンポーネントのグローバル登録

最適化の理由

プラグインのロジックコード

その後、main.jsで登録します。

プラグイン化により、全般登録を行い、参照手順を省略します。

ログイン-全体認識とルーティング設定

全体認識

まず、付属ファイルからテンプレートをコピーしてください。

コード実装

ログイン-フォームバリデーションの実装

バリデーションの理由

フォームバリデーションの方法

フォームバリデーションの手順

コード実装

フォームバリデーション-カスタムバリデーションルール

カスタムバリデーションルール

デフォルト設定が要求を満たさない場合、カスタムバリデーションロジックが必要です。成功時には関数を呼び出し、失敗時には新しいErrorを生成する必要があります。

フォーム全体のバリデーション

コード実装

ログイン-基本ログイン業務の実装

ログイン業務フロー

1. ユーザーへの通知

apisフォルダにuser.jsインターフェースを追加します。

//ユーザー関連インターフェース関数をカプセル化
import request from '@/utils/http'

export const loginAPI = ({account,password}) => {
    return request({
        url:'/login',
        method:'POST',
        data:{
            account,
            password
        }
    })
}

インターフェースをログインページにインポート

コード実装

2. ページの遷移

インターセプターで一括処理し、一括エラーメッセージを表示（これにより一度の設定で複数のインターフェースで実現可能）。使用するスタイルは必要な場所でインポートします。

ログイン-Piniaによるユーザー情報管理

Piniaを使用する理由

Piniaによるデータ管理方法

コード実装（まずstoreで新しいuser.jsを作成）

その後、ログインページをインポート

古いコードを削除し、action関数を呼び出して置き換え

キーワードコードのまとめ

ログイン-Piniaによるユーザー情報の永続化

ユーザー情報の永続化説明

キーワード手順のまとめとプラグイン実行メカニズム

コード実装

日次8

ログイン-ログインと非ログイン状態のテンプレート適合

要求理解

複数テンプレート適合の一般的なアプローチ

実装コード

ログイン-リクエストインターセプターでTokenを保持

なぜリクエストインターセプターでtokenを保持するのか

設定方法

コード実装

ログイン-ログアウト機能の実装

ログアウト業務の実装

コード実装

ログイン-Tokenの有効期限切れ401インターセプター

業務背景

コード実装

カート機能の実装

カート業務ロジックの分解

ローカルカート-カートに追加

コード実装

ローカルカート-ヘッダーのカートリストレンダリング

まず新しいコンポーネントHeaderCart.vueを作成し、LayoutHeaderをインポート

ローカルカート-ヘッダーのカート削除実装

コード実装

ローカルカート-ヘッダーのカート統計計算

計算ロジック

コード実装

ローカルカート-リストカート

リストカート-基本内容のレンダリング

まずview配下に新しいCartListを作成し、routerでルーティングを設定します。childrenの下に配置します。

実装コード

最後にCartList内のindex.vueでデータをインポート

日次9

リストカート-単一選択機能

実装コード

リストカート-全選択

核心思想

1. 単一選択機能の実装

2. 全選択機能の実装

カートリスト-統計データの実装

インターフェースカート

インターフェースカート-全体業務フローの確認

インターフェースカート-カートに追加

実装ロジック

実装コード

まず新しいインターフェースを作成

その後、ログイン状況（tokenの有無）を判定

カート削除

カート削除-カート削除

まず削除インターフェースをカプセル化

//削除インターフェースをカプセル化
export const delCartAPI = (ids) => {
    return request({
        url:'/member/cart',
        method:'delete',
        data: {
            ids
        }
    })
}

実装コード

ログアウト-カートリストのクリア

業務要求

実装コード

サーバーにカートをマージ

マージカート業務の実装

結算モジュール-ルーティング設定と基本データレンダリング

ルーティング設定と基本データレンダリング

コード実装

結算モジュール-住所切替インタラクションの実装

住所切替インタラクションの要求分析

モーダル開閉インタラクションの実装

付属ファイルからモーダルコンポーネントをコピー

コード実装

住所のアクティブインタラクションの実装

クリックでアクティブスタイルを実装するコード

選択後、元の住所を上書きするコード

モーダルを閉じるコード

まとめ

注文モジュール-注文生成機能の実装

業務要求の説明

支払いページのルーティングを準備し、付属ファイルからコピーしてrouterで設定します。

インターフェースカプセル化コード実装

ボタンをクリックしてインターフェースを呼び出し、注文IDを取得し、idを伴ってルーティングを遷移するコード実装

日次10

支払いモジュール-基本データのレンダリング

基本データのレンダリング

コード実装

ここでエラーが発生しました。route.query.idを取得できません。Checkoutで間違えていました。

これで問題なくなります

支払いモジュール-支払い機能の実装

支払い業務フロー

実装コード

// 支払いアドレス
const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'
const backURL = 'http://127.0.0.1:5173/paycallback'
const redirectUrl = encodeURIComponent(backURL)
const payUrl = `${baseURL}pay/aliPay?orderId=${route.query.id}&redirect=${redirectUrl}`

支払いモジュール-支払い結果の表示

業務要求の理解

このプロジェクトで提供されたアカウントに残高がないため、ウェブページは常にエラーを報告します。

支払いモジュール-カウントダウン関数のカプセル化

要求理解

実装アイデアの分析

実装コード

日付フォーマット用のプラグインdayjsをインストール

実装コード

会員センター-全体機能の整理とルーティング設定

全体機能の整理

ルーティング設定（3段階ルーティングを含む）

まず、付属ファイルから2つのページを準備し、routerで3段階ルーティングを設定します。

コード実装

会員センター-個人情報のレンダリング

業務要求の分析と実装

コード実装

会員センター - 注文履歴

注文基本リストのレンダリング

インターフェースをカプセル化

コード実装

tab切替の実装

コード実装

ページングロジックの実装

コード実装

タグ: Vue3 Composition API Pinia Axios router

7月30日 06:03 投稿

異端開発室

VUE3開発ノート

日次1

1. プロジェクト構成と主要ファイル

プロジェクトフォルダ構造：

主要ファイル：

2. Vue2との変更点

setupオプションの記述方法と実行タイミング

ライフサイクル図：

構文糖衣（Syntax Sugar）：コード量を削減

まとめ：

3. コンポジションAPI -- reactiveとref関数

reactive（）

機能

核心手順

ref（）

機能

核心手順

4.computed計算プロパティ関数

まとめ

5.watch関数

基本的な使用方法 - 単一データの監視

基本的な使用方法 - 複数データの監視

immediate

deep

オブジェクトの特定プロパティのみ監視

Vue3のライフサイクルAPI（オプション形式 vs コンポジション形式）

まとめ

コンポジションAPIにおける親子間通信

基本的な考え方

コンポジションAPIにおける子から親への通信

基本的な考え方

まとめ

日次2

テンプレート参照の概念

使用方法（DOM取得の場合、コンポーネントも同様）

DefineExpose()

まとめ:

コンポジションAPI -- provideとinject

機能と使用場面

層ごとの通常データの伝達

層ごとのメソッドの伝達

まとめ

プロジェクト

リストレンダリング

削除機能

編集機能

1. モーダルを開く（子コンポーネントインスタンスを取得し、メソッドを呼び出すかプロパティを変更）

2. データの戻り（詳細インターフェースを呼び出す／現在行の静的データ）

3. データの更新

日次3

axios設定

axiosとは

まとめ

プロジェクトルーティング設計

まとめ

静的リソース初期化

画像リソースとスタイルリソース

scssファイルの自動インポート

自動インポートの理由

layout-静的テンプレート構造の構築

Layoutフォントアイコンの導入

導入方法

1次ナビゲーションのレンダリング

Layout固定ナビゲーションインタラクション試験

Layout--Piniaによる重複リクエストの最適化

最適化の理由

日次4

Home全体構造の構築とカテゴリ実装

Homeモジュールのエントリーコンポーネントでインポートしレンダリング

Home-bannerスライドショー機能実装

Homeパネルコンポーネントのカプセル化

場面説明

コンポーネントカプセル化

まとめ

Home-新鮮な商品と人気商品の実装

新鮮な商品の実装

Home画像遅延読み込み

場面とディレクティブの使用方法

Home-遅延読み込みディレクティブの最適化