私はすでに、vue3の関連する知識ポイント、ref、reactive、computed、watch、watchEffect、toRef、toRefsおよびこれらのリアクティブAPIを紹介しましたが、vue3についてはだれもがある程度理解していると思います。
ライフサイクル
これらの関数に加えて、vue3はいくつかのライフサイクルも追加します。onXXXファミリーから関数を直接インポートして、ライフサイクルフックを登録できます。これは、2.xバージョンのライフサイクルに対応する複合APIです。
1、beforeCreate-> setup（）を使用する
2、作成済み-> setup（）を使用
3、beforeMount-> onBeforeMount
4、マウント済み-> onMounted
5、beforeUpdate-> onBeforeUpdate
6、更新済み-> onUpdated
7、beforeDestroy-> onBeforeUnmount
8、破壊された-> onUnmount
9、errorCaptured-> onErrorCaptured
import {
onMounted, onUpdated, onUnmounted } from 'vue'
const MyComponent = {
setup() {
onMounted(() => {
console.log('mounted!')
})
onUpdated(() => {
console.log('updated!')
})
onUnmounted(() => {
console.log('unmounted!')
})
},
}
これらのライフサイクルフック登録関数は、現在のコンポーネントインスタンス（setup（）を呼び出しているコンポーネントインスタンス）を見つけるために内部グローバル状態に依存しているため、setup（）中にのみ同期的に使用できます。現在のコンポーネントなしでこれらの関数を呼び出すと、間違い。
ライフサイクルの使用法はvue2と大差ありませんが、使用する場合はAPIをインポートすることを忘れないでください。
依存性注入
VueコンポジットAPIは、vue2オプションAPIの提供/注入に類似した、依存性注入のための提供および注入関数を提供します。提供関数と挿入関数はどちらも、現在アクティブなコンポーネントインスタンスのsetup（）でのみ呼び出すことができます。
上流コンポーネントで提供する：
setup () {
provide('Theme', 'dark')
}
下流コンポーネントでの使用：
<template>
<div> hello </div>
</template>
<script>
import {
ref, inject } from 'vue'
export default {
setup () {
const theme = inject('Theme', 'light' /* 默认值 */)
console.log(theme, '依赖注入')
}
}
</script>
効用関数
Vue3には他にもいくつかのAPIがあり、ツールの機能は次のとおりです。
1. Readonlyは、オブジェクトを読み取り専用にします。
2. isRefは、値がrefオブジェクトかどうかをチェックします。
3. isProxyは、オブジェクトが事後対応メソッドまたは読み取り専用メソッドによって作成されたプロキシであるかどうかを確認します。
4. isReactiveは、オブジェクトがリアクティブによって作成されたリアクティブプロキシであるかどうかをチェックします。
5. isReadonlyは、オブジェクトがreadonlyによって作成された読み取り専用プロキシであるかどうかをチェックします。
6.パラメータが参照の場合、unrefはその値を返し、それ以外の場合はパラメータ自体を返します
コンポーネント間のロジックを抽出して再利用する場合、結合されたAPIは非常に柔軟です。複合関数は、そのパラメーターとVueのグローバルにエクスポートされたAPIのみに依存し、微妙なこのコンテキストには依存しません。コンポーネント内のロジックの一部を関数としてエクスポートして再利用できます。セットアップ関数全体をエクスポートして、拡張と同等の効果を実現することもできます。