合成API（合成API）
- セットアップ構成
- リファレンスとリアクティブ
- 時計と時計効果
- 提供して注入する
- ……
新しいビルトイン
- 断片
- テレポート
- サスペンス
その他の変更点
- 新しいライフサイクルフック
- データオプションは常に関数として宣言する必要があります
- v-on 修飾子としての keyCode サポートを削除
- ……

1.Vue3.0プロジェクトを作成する

1. vue-cli を使用して作成します

公式ドキュメント:プロジェクトの作成 | Vue CLI

## @vue/cli のバージョンを確認し、@vue/cli のバージョンが 4.5.0 以降であることを確認します。
vue --version 
## @vue/cli をインストールまたはアップグレードします。
npm install -g @vue/cli 
## 
vue を作成します create vue_test 
# # 
cd vue_test 
npm runserve を開始します

2. vite を使用して作成する

公式ドキュメント:クイックスタート | Vue.js

Vite公式サイト： https: //vitejs.cn

ヴァイトとは何ですか？— 新世代のフロントエンドビルドツール。
利点は次のとおりです。
- 開発環境ではパッケージング操作が不要で、すぐにコールドスタートできます。
- 軽量で高速なホットリロード (HMR)。
- 真のオンデマンドコンパイル。アプリケーション全体がコンパイルされるのを待つ必要はありません。
従来工法とバイト工法の比較表

## プロジェクトを作成します
npm init vite-app <project-name> 
## プロジェクト ディレクトリを入力します
cd <project-name> ## インストールは
npm install
に依存します
## 
npm run devを実行します

2. 共通構成 API

公式ドキュメント:コンポジション API FAQ | Vue.js

1. セットアップを開始します

理解: Vue3.0 の新しい設定項目、値は関数です。
セットアップはすべてComposition API（コンポジションAPI）の「パフォーマンスステージ」です。
コンポーネントで使用されるデータ、メソッドなどはセットアップで設定する必要があります。
setup 関数の 2 つの戻り値:
1. オブジェクトが返された場合、オブジェクト内のプロパティとメソッドをテンプレートで直接使用できます。（集中！）
2. レンダリング関数を返す場合: レンダリングコンテンツをカスタマイズできます。（学ぶ）
注意点：
1. Vue2.x 構成と混合しないようにしてください
  - セットアップのプロパティとメソッドには、Vue2.x 構成 (データ、メソッド、計算...) でアクセスできます。
  - ただし、 Vue2.x 構成 (データ、メソッド、計算...) にはセットアップではアクセスできません。
  - 名前が重複している場合は、セットアップが優先されます。
2. 戻り値は戻りオブジェクトではなく Promise になり、テンプレートは戻りオブジェクトのプロパティを参照できないため、setup を非同期関数にすることはできません。(後で Promise インスタンスを返すこともできますが、それには Suspense コンポーネントと非同期コンポーネントの連携が必要です)

2.ref関数

役割: レスポンシブなデータを定義する
文法：const xxx = ref(initValue)
- 応答データを含む参照オブジェクト (参照オブジェクト、略して ref オブジェクト)を作成します。
- JS でのデータ操作:xxx.value
- テンプレート内のデータを読み取ります: .value は必要ありません。直接:<div>{ {xxx}}</div>
述べる：
- 受信データは、基本タイプまたはオブジェクトタイプです。
- データの基本的なタイプ: Reactive は依然として信頼性が高くObject.defineProperty()、get完全ですset。
- オブジェクト型データ: Vue3.0 の新しい関数 (関数) を内部的に「レスキュー」しますreactive。

3. リアクティブ機能

機能:応答データのオブジェクト型を定義します(基本型には使用せず、ref関数を使用します)
構文:const 代理对象= reactive(源对象)オブジェクト (または配列) を受け取り、プロキシオブジェクト (プロキシのインスタンスオブジェクト。プロキシオブジェクトと呼ばれます) を返します。
reactive で定義される reactive データは「深い」です。
ES6 ベースの内部プロキシ実装は、プロキシオブジェクトを通じてソースオブジェクトの内部データを操作します。

4. Vue3.0の応答原理

vue2.xの応答性

実装原則:
- オブジェクトタイプ:Object.defineProperty()属性の読み取りと変更によるインターセプト (データハイジャック)。
- 配列タイプ: インターセプトは、配列を更新するための一連のメソッドをオーバーライドすることによって実現されます。(配列の変更メソッドはラップされています)。
```
Object.defineProperty(data, 'count', { 
    get () {}, 
    set () {} 
})
```
問題があります：
- 属性を追加または削除しても、インターフェイスは更新されません。
- 添字を使用して配列を直接変更すると、インターフェイスは自動的に更新されません。

Vue3.0の応答性

実現原理:

プロキシ経由 (プロキシ): 属性値の読み取りと書き込み、属性の追加、属性の削除など、オブジェクト内の属性の変更をインターセプトします。
Through Reflect (反射): ソースオブジェクトのプロパティを操作します。

プロキシとリフレクトについては、MDN ドキュメントで説明されています。

プロキシ：プロキシ - JavaScript | MDN

Reflect：リフレクト - JavaScript | MDN

new Proxy(data, { 
    // 読み取りプロパティ値をインターセプト
    get (target, prop) { 
        return Reflect.get(target, prop) 
    }, 
    // 設定されたプロパティ値をインターセプトするか、新しいプロパティ
    セットを追加します set (target, prop, value) { 
        return Reflect.set(target, prop, value) 
    }, 
    // 削除プロパティをインターセプトします
    deleteProperty (target, prop) { 
        return Reflect.deleteProperty(target, prop) 
    } 
}) 
proxy.name
= 'tom'

5. リアクティブとリファレンス

データを定義するという観点から見ると、次のようになります。
- ref は、基本型データを定義するために使用されます。
- reactive は、オブジェクト (または配列) タイプのデータを定義するために使用されます。
- 備考: ref はオブジェクト (または配列) 型のデータを定義するために使用することもでき、これは内部でプロキシオブジェクトreactiveに自動的に変換されます。
原理比較の観点から:
- ref は、ANDObject.defineProperty()を介して応答性 (データハイジャック) を実装します。getset
- reactive は、 Proxyを使用して応答性 (データハイジャック) を実装し、 Reflectを通じてソースオブジェクト内のデータを操作します。
使用の観点から:
- ref: で定義されたデータは、データ操作には必要.valueですが、データ読み取り時のテンプレートでの直接読み取りには必要ありません.value。
- reactive で定義されるデータ: 操作データと読み取りデータ:どちらも必要ありません.value。

6. セットアップ時の2つの注意点

セットアップ実行のタイミング
- beforeCreate の前に 1 回実行されますが、これは未定義です。
セットアップのパラメータ
- props: 値は、コンポーネントの外部から渡され、コンポーネントの内部宣言によって受け取られるプロパティを含むオブジェクトです。
- コンテキスト:コンテキストオブジェクト
  - attrs: 値は、コンポーネントの外部から渡されるが、props 構成で宣言されていない属性を含むオブジェクトです。と同等ですthis.$attrs。
  - スロット: 受信したスロットの内容。に相当しますthis.$slots。
  - Emit: カスタムイベントを送出する関数。と同等ですthis.$emit。

7. 計算されたプロパティとモニタリング

1.計算関数

Vue2.x の計算された構成関数と一致します。

言葉遣い

import {computed} from 'vue' 
setup
(){ 
    ... 
    //計算されたプロパティ - 短縮形
    let fullName = computed(()=>{ 
        return person.firstName + '-' + person.lastName 
    }) 
    //計算されたプロパティ- full 
    let fullName = computed({ 
        get(){ 
            return person.firstName + '-' + person.lastName 
        }, 
        set(value){ 
            const nameArr = value.split('-') 
            person.firstName = nameArr[ 0] 
            person.lastName = nameArr[1] 
        } 
    }) 
}

2.時計機能

Vue2.x の監視設定機能と一致します。

2 つの小さな「穴」:

reactive:oldValueで定義されたレスポンシブデータを監視する場合、oldValueが正しく取得できず、強制的にディープ監視が有効になります(ディープ設定は無効)。
reactive: で定義されたリアクティブデータ内の属性を監視する場合、詳細設定が有効です。


//状況 1: ref watch(sum,(newValue,oldValue)=>{ 
    console.log('sumChanged',newValue,oldValue) 
},{immediate:true})で定義された応答データを監視する
//
状況 2 : 複数の参照によって定義された応答データを監視します
watch([sum,msg],(newValue,oldValue)=>{ 
    console.log('sum or msg hasChanged',newValue,oldValue) 
}) 
/
* 状況 3 : 監視reactive で定義された reactive データ
            reactive で定義された reactive データをウォッチが監視している場合、oldValue を正しく取得できません。！
            ウォッチが reactive で定義されたリアクティブ データを監視する場合、詳細な監視が強制的に有効になります
*/ 
watch(person,(newValue,oldValue)=>{ 
    console.log('person hasChange',newValue,oldValue) 
},{immediate :true,deep:false}) // ここでの深い設定は機能しなくなりました// 状況 4: reactive 
watch(()=>person.job,(newValue,oldValue)
で
定義された応答データ内のプロパティを監視します)=>{
    console.log('人のジョブが変更されました', newValue, oldValue) 
},{immediate:true,deep:true}) // 状況 5: reactive 
watch([( )=>
で
定義された応答データ内の特定の属性を監視しますperson.job,()=>person.name],(newValue,oldValue)=>{ 
    console.log('人のジョブが変更されました',newValue,oldValue) 
},{immediate:true,deep:true }) 
/ /
特殊なケース
watch(()=>person.job,(newValue,oldValue)=>{ 
    console.log('person's job has beenチェンジ',newValue,oldValue) 
},{deep:true}) / /ここでは、モニタリングが reactive 要素によって定義されたオブジェクト内の特定の属性である場合、深い設定が有効です

3.watchEffect関数

監視のルーチンは、監視の属性だけでなく、監視のコールバックも指定します。
watchEffect のルーチンは、どの属性を監視するか、どの属性を監視コールバックで使用するか、次にどの属性を監視するかを指定する必要はありません。

watchEffect は計算に少し似ています。

ただし、computed は計算値（コールバック関数の戻り値）に注目するため、戻り値を記述する必要があります。
また、watchEffect は処理 (コールバック関数の関数本体) に注目するため、戻り値を記述する必要がありません。

//watchEffect で指定されたコールバックで使用されるデータが変更される限り、コールバックは直接再実行されます。
watchEffect(()=>{ 
    const x1 = sum.value 
    const x2 = person.age 
    console.log('watchEffect によって設定されたコールバックが実行されます') 
})

8. ライフサイクル

vue2.x のライフサイクル

vue3.0のライフサイクル

Vue2.x のライフサイクルフックは Vue3.0 でも引き続き使用できますが、そのうち 2 つのフックの名前が変更されました。
- beforeDestroyに名前を変更しますbeforeUnmount
- destroyedに名前を変更しますunmounted
Vue3.0 では、Composition API の形式でライフサイクルフックも提供されており、Vue2.x のフックとの対応関係は次のとおりです。
- beforeCreate===>setup()
- created=======>setup()
- beforeMount===>onBeforeMount
- mounted=======>onMounted
- beforeUpdate===>onBeforeUpdate
- updated=======>onUpdated
- beforeUnmount ==>onBeforeUnmount
- unmounted=====>onUnmounted

9. カスタムフック機能

フックとは何ですか? —— 基本的には、セットアップ関数で使用されるComposition APIをカプセル化する関数です。
vue2.x の mixin に似ています。
カスタムフックの利点: コードの再利用により、セットアップのロジックがより明確になり、理解しやすくなります。

10.toRef

機能: 値が別のオブジェクトの属性を指す ref オブジェクトを作成します。
文法：const name = toRef(person,'name')
用途: 外部使用のみを目的としてレスポンシブオブジェクトにプロパティを提供したい場合。

拡張機能:関数toRefsと同じですが、複数の ref オブジェクトをバッチで作成できます。構文:toReftoRefs(person)

3. その他の合成 API

1.shallowReactiveとshallowRef

ShallowReactive: オブジェクトの最も外側のプロパティの応答 (浅い応答) のみを処理します。
shallowRef: オブジェクトの応答ではなく、基本的なデータ型の応答のみを処理します。
いつ使用しますか?
- オブジェクトデータがある場合、構造は比較的深いですが、外側の属性のみが変化します ===>shallowReactive。
- オブジェクトデータがある場合、後続の関数はオブジェクト内のプロパティを変更しませんが、===> ShallowRef を置き換える新しいオブジェクトを生成します。

2.readonlyとshallowReadonly

readonly: リアクティブデータを読み取り専用 (ディープ読み取り専用) にします。
shallowReadonly: レスポンシブデータを読み取り専用（浅い読み取り専用）にします。
適用シナリオ: データの変更が予想されない場合。

3. toRaw と markRaw

toRaw：
- 機能:reactiveボットによって生成された応答オブジェクトを通常のオブジェクトに変換します。
- 使用シナリオ: 応答オブジェクトに対応する共通オブジェクトを読み取るために使用されます。この共通オブジェクトに対するすべての操作によってページが更新されることはありません。
マーク生：
- 役割: オブジェクトが再び応答オブジェクトにならないように、オブジェクトにマークを付けます。
- アプリケーションシナリオ:
  1. 複雑なサードパーティライブラリなど、一部の値はレスポンシブに設定すべきではありません。
  2. リアクティブ変換をスキップすると、不変のデータソースを含む大きなリストをレンダリングする際のパフォーマンスが向上します。

4.カスタム参照

役割: 依存関係の追跡と更新トリガーを明示的に制御するカスタム ref を作成します。

手ぶれ補正効果を得るには:

<template> 
    <input type="text" v-model="keyword"> 
    <h3>{ 
    
    {keyword}}</h3> 
</template> 
<script>
 
    'vue' からインポート {ref,customRef}
    エクスポート デフォルト{ 
        name:'Demo', 
        setup(){ 
            // let キーワード = ref('hello') // Vue が用意した組み込み ref を使用する
            // myRef
            関数をカスタマイズする myRef(value,lay){ 
                let timer 
                //カスタムを実装するには、customRef を渡します
                。 return CustomRef((track,trigger)=>{ 
                    return{ 
                        get(){ 
                            track() //この値を「追跡」する必要があることを Vue に伝えます
                            return value
                        },
                        set(newValue){ 
                            clearTimeout(timer) 
                            timer = setTimeout(()=>{ 
                                value = newValuetrigger 
                                () //Vue にインターフェースを更新するように指示します
                            },lay) 
                        } 
                    } 
                }) 
            } 
            letKeyword = myRef('hello', 500 ) //プログラマ定義の ref を使用
            return {
                キーワード
            } 
        } 
    } 
</script>

5.提供と注入

役割:祖先コンポーネントと子孫コンポーネント間の通信を実現します。
ルーチン: 親コンポーネントにはprovideデータを提供するオプションがあり、子孫コンポーネントにはinjectこのデータの使用を開始するオプションがあります。

具体的には次のように書かれています。

親コンポーネント内:

setup(){ 
    ...... 
    let car = reactive({name:'奔驰',price:'40万'}) 
    Provide('car',car) 
    ...... 
}

子孫コンポーネント内:

setup(props,context){ 
    ...... 
    const car = inject('car') 
    return {car} 
    ...... 
}

6. レスポンシブデータの判定

isRef: 値が ref オブジェクトかどうかを確認します。
isReactive: オブジェクトがreactiveリアクティブプロキシによって作成されたかどうかを確認します
isReadonly: オブジェクトがreadonly読み取り専用プロキシによって作成されたかどうかを確認します。
isProxy: オブジェクトがreactiveorメソッドによってreadonly作成されたプロキシかどうかを確認します。

4. 構成APIのメリット

1. オプション API の問題

従来の OptionsAPI では、要件を追加または変更する場合、データ、メソッド、および計算のそれぞれで変更する必要があります。

2. 構成APIのメリット

コードと関数をよりエレガントに整理できます。関連する関数のコードをより整然とした方法でまとめて整理します。

5. 新しいコンポーネント

1.フラグメント

Vue2 の場合: コンポーネントにはルートタグが必要です
Vue3 では: コンポーネントはルートタグを持つことができず、複数のタグが内部的にフラグメント仮想要素に含まれます。
利点: ラベルレベルの削減、メモリ使用量の削減

2.テレポート

テレポートとは何ですか? --は、コンポーネントの HTML 構造を指定された場所にTeleport移動できる技術です。

<teleport to="場所を移動"> 
	<div v-if="isShow" class="mask"> 
		<div class="dialog"> 
			<h3>私はポップアップです</h3> 
			<button @click=" isShow = false">ポップアップを閉じる</button> 
		</div> 
	</div> 
</teleport>

3.サスペンス

非同期コンポーネントの待機中に追加のコンテンツをレンダリングすることで、アプリケーションのユーザーエクスペリエンスが向上します。

使用手順:

コンポーネントを非同期的にインポートする

import {defineAsyncComponent} from 'vue' 
const Child =defineAsyncComponent(()=>import('./components/Child.vue'))

ラッパーコンポーネントを使用しSuspense、次defaultのように設定します。fallback

<template> 
	<div class="app"> 
		<h3>我是App组件</h3> 
		<Suspense> 
			<template v-slot:default> 
				<Child/> 
			</template> 
			<template v-slot:fallback> 
				< h3>加ダウンロード中....</h3> 
			</template> 
		</Suspense> 
	</div> 
</template>

6. その他

1. グローバルAPIの移管

Vue 2.x には、多くのグローバル API と構成があります。

例: グローバルコンポーネントの登録、グローバルディレクティブの登録など。

//グローバルコンポーネントを登録します
Vue.component('MyButton', { 
  data: () => ({ 
    count: 0 
  }), 
  template: '<button @click="count++">{ 
      
      { count }} 回クリックしました。</ button>' 
}) 
//
グローバル ディレクティブを登録
Vue.directive('focus', {
  挿入: el => el.focus() 
}

これらの API は Vue3.0 で調整されました。

グローバル API を調整します。つまり、Vue.xxxアプリケーションインスタンスに合わせて調整します ( app)

2.x グローバル API ( `Vue`)	3.x インスタンス API ( `app`)
Vue.config.xxxx	app.config.xxxx
Vue.config.productionTip	取り除く
Vue.component	アプリコンポーネント
ディレクティブ.view	app.ディレクティブ
Vue.mixin	アプリミックスイン
Vue.use	アプリの使用
Vue.プロトタイプ	app.config.globalProperties

2. その他の変更点

data オプションは常に関数として宣言する必要があります。

過度のクラス名の変更:

Vue2.xの書き方

.v-enter、
.v-leave-to {
  不透明度: 0; 
.v 
-leave、
.v-enter-to {
  不透明度: 1; 
}

Vue3.xの書き方

.v-enter-from、
.v-leave-to {
  不透明度: 0; 
.v 

-leave-from、
.v-enter-to {
  不透明度: 1; 
}

keyCode を v-on 修飾子として削除し、サポートされなくなりましたconfig.keyCodes

v-on.native修飾子を削除する

親コンポーネントのバインドイベント

<my-component 
  v-on:close="handleComponentEvent" 
  v-on:click="handleNativeClickEvent" 
/>

サブコンポーネントでカスタムイベントを宣言する

<script>
  デフォルトのエクスポート {
    出力: ['close'] 
  } 
</script>

フィルターを削除する

フィルタこれは便利そうに見えますが、中括弧内の式が「単なる JavaScript」であるという前提を打ち破るカスタム構文が必要であり、学習コストだけでなく実装コストもかかります。フィルターをメソッド呼び出しまたは計算されたプロパティに置き換えることをお勧めします。

VUE3 をすぐに始めましょう (この記事を読むだけで十分です)

Vue3 のクイック スタート

1. Vue3 の概要

2. Vue3 がもたらすもの

1. パフォーマンスの向上

2. ソースコードのアップグレード

3. TypeScript を採用する

4. 新機能