Vue3のComposition APIに関して
Vue3では、Composition APIと呼ばれる新しいAPIが導入され、より柔軟で再利用可能なコードを書くことができるようになりました。この記事では、Vue3のComposition APIの主要な関数であるref、reactive、computed、onMounted、onBeforeMount、onUpdated、onUnmounted、getCurrentInstance、toRawに焦点を当て、具体的な使用例確認します。
1. ref関数
ref関数は、リアクティブなデータを作成するために使用されます。リアクティブデータは、Vueのデータとビューを結びつけるために必要です。
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// ref関数を使用してcount変数をリアクティブデータにする
const count = ref(0);
// countの値を1増やす関数
const increment = () => {
count.value++;
};
// countとincrementを返す
return {
count,
increment,
};
},
};
</script>
2. reactive関数
reactive関数は、オブジェクトをリアクティブデータに変換するために使用されます。オブジェクト内のプロパティの変更は自動的にトラッキングされ、ビューに反映されます。
<template>
<div>
<p>Name: {{ user.name }}</p>
<p>Age: {{ user.age }}</p>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
// reactive関数を使用してuserオブジェクトをリアクティブデータにする
const user = reactive({
name: 'John',
age: 30,
});
// userを返す
return {
user,
};
},
};
</script>
3. computed関数
computed関数は、算出プロパティを作成するために使用されます。算出プロパティは、他のリアクティブデータの変更に応じて自動的に再計算されます。
<template>
<div>
<p>Count: {{ count }}</p>
<p>Double Count: {{ doubleCount }}</p>
</div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0);
// computed関数を使用してcountの2倍を算出プロパティとして作成する
const doubleCount = computed(() => count.value * 2);
return {
count,
doubleCount,
};
},
};
</script>
4. ライフサイクルフック
ライフサイクルフックは、Vueコンポーネントのライフサイクルイベントに対応する関数を定義するために使用されます。
<script>
import { onMounted, onBeforeMount, onUpdated, onUnmounted } from 'vue';
export default {
setup() {
// コンポーネントがマウントされる前に実行される
onBeforeMount(() => {
console.log('Component about to be mounted.');
});
// コンポーネントがマウントされた後に実行される
onMounted(() => {
console.log('Component mounted.');
});
// コンポーネントが更新された後に実行される
onUpdated(() => {
console.log('Component updated.');
});
// コンポーネントがアンマウントされる前に実行される
onUnmounted(() => {
console.log('Component about to be unmounted.');
});
},
};
</script>
5. getCurrentInstance関数
getCurrentInstance関数は、現在のコンポーネントインスタンスを取得するために使用されます。これを使って、コンポーネントの内部からコンポーネント自体にアクセスすることができます。
<template>
<div>
<p>Count: {{ count }}</p>
</div>
</template>
<script>
import { ref, getCurrentInstance } from 'vue';
export default {
setup() {
const instance = getCurrentInstance();
const count = ref(0);
// コンポーネントのロジック内でコンポーネントにアクセスする
instance.props = {
count,
};
return {
count,
};
},
};
</script>
6. toRaw関数
toRaw関数は、リアクティブデータを元の非リアクティブなオブジェクトに変換するために使用されます。リアクティブなオブジェクトのプロキシが不要な場合、toRaw関数を使って非リアクティブなオブジェクトにアクセスすることができます。
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="reset">Reset</button>
</div>
</template>
<script>
import { ref, toRaw } from 'vue';
export default {
setup() {
const count = ref(0);
const reset = () => {
// リアクティブデータを非リアクティブなオブジェクトに変換する
const rawCount = toRaw(count);
rawCount = 0; // プロキシが不要な場合は、非リアクティブなオブジェクトにアクセスして値を設定する
};
return {
count,
reset,
};
},
};
</script>
まとめ
本記事では、Vue3のComposition APIの主要な関数であるref、reactive、computed、onMounted、onBeforeMount、onUpdated、onUnmounted、getCurrentInstance、toRawに焦点を当て、具体的な使用例を確認しました。みなさんも良いVueLifeを！！
参考資料
Discussion