シリーズ記事ディレクトリ
| コンテンツ | リンク |
|---|---|
| Vue2からVue3へ[ゼロ] | Vue3 の概要 |
| Vue2からVue3へ [1] | 構成 API (第 1 章) |
| Vue2からVue3へ [2] | 構成 API (第 2 章) |
| Vue2 から Vue3 へ [3] | 構成 API (第 3 章) |
| Vue2 から Vue3 へ [4] | 構成 API (第 4 章) |
記事ディレクトリ
序文
Vue.js フレームワークの最新バージョンとして、Vue3 には多くのエキサイティングな新機能と改善が導入されています。その中でも、結合された API は Vue3 の最も顕著な機能の 1 つです。この記事では、 Vue3 の構成 APIについて詳しく説明し、開発中のその利点と使用法を探っていきます。初心者でも経験豊富な Vue 開発者でも、コンポジション API の使用方法を学ぶことで、複雑なアプリケーションをより効率的に構築し、コードの保守性と再利用性を向上させることができます。
1. ライフサイクル
ライフ サイクルについては誰もがよく知っているはずですが、Vue 3 では新しい複合 API が導入されているため、Vue 3 ではライフ サイクル フック関数にいくつかの変更が加えられています。
vue2のライフサイクル図
-
beforeCreate : インスタンスが作成される前、コンポーネントのデータとメソッドが初期化されていないときに呼び出されます。
-
created : インスタンスの作成直後に呼び出され、データとメソッドにアクセスできますが、まだ DOM にマウントされていません。
-
beforeMount : コンポーネントが DOM にマウントされる前に呼び出されます。テンプレートはコンパイルされていますが、まだページ上にレンダリングされていません。
-
mount : コンポーネントが DOM にマウントされた後に呼び出され、この時点でコンポーネントはページ上にレンダリングされており、DOM 操作などの操作を実行できます。
-
beforeUpdate : データが更新される前、仮想 DOM が再レンダリングされてパッチが適用される前に呼び出されます。
-
updated : データが更新された後、仮想 DOM が再レンダリングされ、パッチが適用された後に呼び出されます。
-
beforeDestroy : インスタンスが破棄される前に呼び出され、タイマーのクリア、イベントのバインド解除など、いくつかのクリーニング作業をここで実行できます。
-
destroy : インスタンスが破棄され、コンポーネントがページから削除され、すべてのイベント リスナーとデータ バインディングが自動的にクリアされた後に呼び出されます。
-
アクティブ化(キープアライブ コンポーネントでのみ使用可能): コンポーネントがアクティブ化されたときに呼び出され、キープアライブ コンポーネントにのみ適用されます。
-
deactivated (キープアライブ コンポーネントでのみ使用可能): コンポーネントが非アクティブ化されたときに呼び出され、キープアライブ コンポーネントにのみ適用されます。
vue3 のライフサイクル図
2 つの図を比較すると、ライフサイクルフック機能の設定項目に大きな変更がないことがわかります。 -
beforeDestroyに名前を変更しますbeforeUnmount -
destroyedに名前を変更しますunmounted
在vue3中通过配置项形式使用生命周期钩子函数
<script>
export default {
name: 'Demo',
setup(){
},
//通过配置项的形式使用生命周期钩子
beforeCreate() {
console.log('---beforeCreate---')
},
created() {
console.log('---created---')
},
beforeMount() {
console.log('---beforeMount---')
},
mounted() {
console.log('---mounted---')
},
beforeUpdate(){
console.log('---beforeUpdate---')
},
updated() {
console.log('---updated---')
},
beforeUnmount() {
console.log('---beforeUnmount---')
},
unmounted() {
console.log('---unmounted---')
}
}
</script>
在vue3中通过组合式API形式使用生命周期钩子函数
<script>
// 导入使用的钩子函数
import {
ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
export default {
name: 'Demo',
setup(){
let sum = ref(0)
console.log('---setup---')
//通过组合式API的形式去使用生命周期钩子
onBeforeMount(()=>{
console.log('---onBeforeMount---')
})
onMounted(()=>{
console.log('---onMounted---')
})
onBeforeUpdate(()=>{
console.log('---onBeforeUpdate---')
})
onUpdated(()=>{
console.log('---onUpdated---')
})
onBeforeUnmount(()=>{
console.log('---onBeforeUnmount---')
})
onUnmounted(()=>{
console.log('---onUnmounted---')
})
return {
sum}
}
}
</script>
-
Comboposition API の形式のライフサイクル フックは、次のように Vue2.x のフックに対応します。
beforeCreate===>setup()created=======>setup()beforeMount===>onBeforeMountmounted=======>onMountedbeforeUpdate===>onBeforeUpdateupdated=======>onUpdatedbeforeUnmount==>onBeforeUnmountunmounted=====>onUnmounted
beforeCreate で作成された場合、vue3 には対応するフック関数が提供されていないため、setup によって置き換えられます。
2、フック
vue3中使用了hooks的概念，使得组件逻辑更加模块化、可复用————セットアップ関数で使用するコンポジション API をカプセル化します
。 src ディレクトリに新しいフック フォルダーを作成し、セットアップで再利用可能なロジック コードを抽出し、js/ts ファイルにカプセル化します。 このロジックを使用する必要があるコンポーネントで、この関数をインポートして使用します
。
<script>
import {
ref} from 'vue'
import usePoint from '../hooks/usePoint'
export default {
name: 'Demo',
setup(){
//数据
let sum = ref(0)
// 封装起来的hooks函数
let point = usePoint()
//返回一个对象（常用）
return {
sum,point}
}
}
</script>
usePoint.js コード
import {
reactive,onMounted,onBeforeUnmount} from 'vue'
//需要导出该函数 默认导出、按需导出都可以
export default function (){
//实现鼠标“打点”相关的数据
let point = reactive({
x:0,
y:0
})
//实现鼠标“打点”相关的方法
function savePoint(event){
point.x = event.pageX
point.y = event.pageY
console.log(event.pageX,event.pageY)
}
//实现鼠标“打点”相关的生命周期钩子
onMounted(()=>{
window.addEventListener('click',savePoint)
})
onBeforeUnmount(()=>{
window.removeEventListener('click',savePoint)
})
return point
}
3 つ、toRef と toRefs
-
toRef 関数:
- toRef 関数は、リアクティブ オブジェクトのプロパティを単一のリアクティブ参照に変換します。
- これには 2 つのパラメータが必要です。最初のパラメータはリアクティブ オブジェクトで、2 番目のパラメータは参照するプロパティ名です。
const name = toRef(person,'name') - toRef 関数は、新しい応答参照を返します。この参照は常にオブジェクト プロパティに関連付けられたままになります。つまり、オブジェクト プロパティが変更されると、参照も変更されます。
<script>
import {
ref,reactive,toRef} from 'vue'
export default {
name: 'Demo',
setup(){
//数据
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
return {
name:toRef(person,'name'),
age:toRef(person,'age'),
salary:toRef(person.job.j1,'salary'),
}
}
}
</script>
-
toRefs 関数:
- toRefs 関数は、リアクティブ オブジェクトを、プロパティ名をキー、プロパティ値を値として持つ通常のオブジェクトに変換します。各プロパティ値は個別のリアクティブ参照です。
- リアクティブオブジェクトをパラメータとして受け取ります。
- toRefs 関数は、各プロパティ値が元のリアクティブ オブジェクトのプロパティに関連付けられたままの新しいリアクティブ参照である新しいプレーン オブジェクトを返します。
- toRef を使用すると、リアクティブ オブジェクトをコンポーネント内の複数の個別のリアクティブ参照に簡単に変換できるため、コンポーネント内のプロパティをより柔軟に使用および更新できます。
<script>
import {
reactive,toRefs} from 'vue'
export default {
name: 'Demo',
setup(){
//数据
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
return {
// toRefs会将person里面的所有属性转换为多个响应式引用 只转换出来一层 想解多层的还是去使用toRef吧
...toRefs(person)
}
}
}
</script>
使用toRef和toRefs可以在组件中更灵活地操作响应式数据たとえば、 toRef を使用して特定のプロパティを参照するリアクティブ参照を作成し、それをテンプレート内で直接使用したり、 toRefs を使用してリアクティブ オブジェクト全体のプロパティを複数のリアクティブ参照に変換し、コンポーネント内でこれらの参照に個別にアクセスして更新したりすることができます。これらの関数はコード ロジックを簡素化し、可読性と保守性を向上させるのに役立ちます。
要約する
このシリーズでは、ここまでで、vue3 で一般的に使用される結合 API の説明を完了しました。後続の記事では、他の結合 APIや、 vue3 の新しいコンポーネントやいくつかのマイナーな変更について説明します。ご支援ありがとうございます~このシリーズ記事の購読へようこそ!