Vue3 + TypeScript 開発の概要

Vue3 + TypeScript 学習

1. 環境設定

1.1 最新のVue scaffoldingをインストールする

npm インストール -g @vue/cli
糸グローバル追加 @vue/cli

1.2 Vue3プロジェクトを作成する

vue プロジェクト名を作成

1.3 既存の Vue 2 プロジェクトを Vue 3 にアップグレードする

vue タイプスクリプトを追加

2. Vue3への攻撃

2.1 Vue 2 の制限

コンポーネントとその依存関係が大きくなるにつれて、コンポーネントの読み取りと保守が困難になります。
コンポーネント間のコード再利用には完璧な解決策はない

2.2 Vue 3がVue 2の制限をどう解決するか

コンポーネントの保守と管理が難しい

[Vue3 で複合関数を記述し、Compositon Api setUp を使用して解決する]

コンポーネント間のコード再利用には完璧な解決策はない

3. Vue3 コンポジション API

3.1 コンポジションAPIについて

Vue3 では、 Composition Apiを使用せずにコンポーネントを記述することもできます。これは、Vue3 でコンポーネントを記述する別の方法であり、内部的に多くの操作を簡素化します。

したがって、Vue2 の方法を引き続き使用してコンポーネントを記述できます。

3.2 コンポジションAPIを使用する場合

TypeScriptは大規模なコンポーネントの記述をサポートしており、 Composition Api APIを使用して状態を管理し、コンポーネント間でコードを再利用することができます。

4. コンポジションAPIの基本的な基礎

4.1 setupとは何か

setup は、コンポーネントの状態を構成するために使用される別の実装です。

セットアップで定義された状態。テンプレートで使用する場合はメソッドが返す必要があります。

知らせ：

セットアップメソッドは、コンポーネント、プロパティ、データメソッド、計算されたライフサイクルメソッドの前に実行されます。
同時に、セットアップではアクセスできません

4.2 ref レスポンシブ変数の作成

Vue2 では、データ内でレスポンシブ変数を直接定義し、テンプレート内でその変数を使用します。コンポジション API を使用する場合は、ページで使用する前に、セットアップで ref を使用してレスポンシブ変数を作成し、それを返す必要があります。

使用：

ref をインポートします。import { ref } from 'vue'
初期変数 const name = ref('デフォルト値を指定')
変数を返す return { name } returnメソッドを返すこともできます
セットアップで定義された変数の値にアクセスするには、変数名を介して直接取得することはできません。オブジェクトと値を取得するには、変数名.値を使用する必要があります。

これによって得られる利点は次のとおりです。

ステータスの管理が簡単です。いくつかのセットアップステータス管理に分割し、最終的にすべてを 1 つのファイルにインポートして使用できます。

<テンプレート>
    <div>
        <h1>{{タイトル}}</h1>
    </div>
</テンプレート>

<スクリプト>
'vue' から {ref,defineComponent} をインポートします。
エクスポートデフォルトdefineComponent({
    設定 （） {
        // レスポンシブ変数を定義する const title = ref('フロントエンド自習コミュニティ')
        
          // 変数にアクセス console.log(title.value)
        // 変数を返す return {title}
    }
})
</スクリプト>

4.3 ライフサイクル

Composition API ライフサイクルフックは、Vue 2 のオプションのライフサイクルフックと同じ名前を持ちますが、Composition API を使用する場合は、on、onMounted というプレフィックスが付きます。

以下のコードには 2 つのライフフックがマウントされています。どちらが最初に実行されると思いますか?

setupが最初に実行されます

設定 （） {
        // レスポンシブ変数を定義する const title = ref('フロントエンド自習コミュニティ')
        コンソール.log(タイトル)
        // 変数を返す function getTitle(){
            console.log(タイトル.値)
        }
        // ページが読み込まれています onMounted(getTitle)
        {タイトル}を返す
    },
    マウント() {
        console.log('マウントされた実行順序をテストします')
    },

4.4 ウォッチ

セットアップの変更に反応するために時計を使用する

1. watch をインポートします。import { watch } from 'vue'

2. ウォッチを直接使用します。ウォッチは3つのパラメータを受け入れます

更新をリッスンするためのリアクティブ参照またはゲッター関数
更新操作を実行するためのコールバック
オプションの構成項目

'vue' から {wathc} をインポートします

// レスポンシブ変数を定義する const num = ref(0)
// レスポンシブ変数を更新する function changeNum(){
            数値++
}

// wathc は応答変数を監視します watch(
 num,(新しい値, 古い値) => {
 console.log(`newValue は: ${newValue}、--------oldValue は: ${oldValue}`)
   }
 ）

4.5 計算

これも vue からインポートされ、computed 関数は、computed の最初の引数として渡された getter のようなコールバックの出力への読み取り専用のリアクティブ参照を返します。新しく作成された計算変数の値にアクセスするには、ref の場合と同じように .value プロパティを使用する必要があります。

numの値が変わると、numsの値は*3になります。

'vue' から {ref,computed} をインポートします。

定数 num = ref(0)

// 数値を更新
関数changeNum(){
   数値++
 }
// num の変更を監視する const nums = computed(() =>{
  数値 * 3 を返す
 })

5. セットアップ

5.1 2つのパラメータを受け入れる

props: 親コンポーネントによって渡されるプロパティ。setup` 関数の props はレスポンシブです。データが更新されると更新されますが、ES6 の分解は props をレスポンシブにしないため使用できません。

コンテキスト: 3つのコンポーネント· propertyを公開する通常のオブジェクトです

属性
スロット
トリガーイベント

contextはレスポンシブではないため、 ES6構造化分解を使用して記述を簡素化できます。

小道具:{
        オブジェクト:{
            タイプ:オブジェクト
        }
    },
     セットアップ (props,{attrs,slots,emit}) {
            コンソール.log(属性)
            console.log(スロット)
            console.log(出力)
             コンソールログ(props.obj)
     }

5.2 コンポーネントsetupをロードする際の注意

コンポーネントがsetupを実行すると、コンポーネントインスタンスは作成されないため、次のプロパティにアクセスできません。

データ
計算された
方法

6. ライフサイクル

setupでライフサイクルを使用する場合は、プレフィックスon.

7. コンポーネント間で値を転送する

Vue 2では、 Provide/Injectを使用してコンポーネント間で値を渡すことができましたが、これはVue 3でも可能です。

setupで使用され、 vueからインポートする必要があります。

Provideを使用する場合、通常は responsive update に設定され、親コンポーネントが変更されると、子コンポーネントと子孫コンポーネントも更新されます。

レスポンシブな更新を設定するにはどうすればいいですか?

ref / reactive を使用してレスポンシブ変数を作成する
provide('name', '渡されるレスポンシブ変数') を使用します。
最後に、レスポンシブ変数を更新するイベントを追加します。これにより、レスポンシブ変数が更新されると、provide 内の変数も更新されます。

親コンポーネント:

"vue" から provide、defineComponent、ref、reactive をインポートします。

<テンプレート>
  
  <息子/>
  
</テンプレート>


<スクリプト>
    "vue" から provide、defineComponent、ref、reactive をインポートします。
    エクスポートデフォルトdefineComponent({
    設定（） {
            const father = ref("私の親コンポーネント");
    const 情報 = リアクティブ({
      id: 23,
      メッセージ: 「フロントエンド自習コミュニティ」、
    });
    関数changeProvide(){
      info.message = 'テスト'
    }
    provide('父',父)
    提供する('情報',情報)
    {changeProvide} を返します。
    }
    
})
</スクリプト>

サブコンポーネント:

<テンプレート>
    <div>
        <h1>{{情報メッセージ}}</h1>
        <h1>{{父親データ}}</h1>
    </div>
</テンプレート>

<スクリプト>
'vue' から {provide、defineComponent、ref、reactive、inject} をインポートします。
エクスポートデフォルトdefineComponent({
    設定 （） {
        const 父データ = 注入('父')
        const info = inject('info')
        
        {fatherData,info} を返します
    }
})
</スクリプト>

8. VueでTypeScriptを使用する際のヒント

8.1 インターフェース制約制約属性

TypeScirptの特性を利用して、型アサーション+インターフェースはプロパティを完全に制約します

インタフェース

ページングクエリフィールド属性タイプの検証:

エクスポートデフォルトインターフェースqueryType{
    ページ: 番号、
    サイズ: 数、
    名前: 文字列、
    年齢: 番号
}

コンポーネントで使用:

'../interface/Home' から queryType をインポートします。


    データ（） {
        戻る {
            クエリ:{
                ページ:0,
                サイズ:10,
                名前:'テスト',
                年齢: 2
            } クエリタイプとして
        }
    },

8.2 コンポーネントはdefineComponentを使用して定義されます

この方法でTypeScriptはVueコンポーネントオプションの型を正しく推測します

'vue' から {defineComponent} をインポートします。

エクスポートデフォルトdefineComponent({
    設定（）{
        戻る{ }
    }
})

8.3 リアクティブ型宣言

デフォルトインターフェース製品をエクスポートする {
    名前:文字列、
    価格:数量、
    アドレス:文字列
}

 

'@/interface/Product' から製品をインポートします。 
'vue' から {reactive} をインポートします
const product = reactive({name:'xiaomi 11',price:5999,address:'北京'}) として製品
       
{fatherData,info,product} を返します

以上がVue3 + TypeScript開発概要の詳しい内容です。Vue3 + TypeScriptについてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご注目ください！

以下もご興味があるかもしれません: