Vue 3 では Composition API が導入され、より直感的かつ柔軟なコードを書くことができます。この API には、Vue 2 にあったオプション API の代替として使用することができるいくつかの関数が含まれています。その中には、ref と toRefs も含まれています。これらは、Vue 3 の Composition API でデータを扱うために非常に重要な関数です。
ref とは？
ref は、Vue 3 の Composition API で値をラップするための関数です。これにより、変数の値を簡単に追跡できます。ref は、単一の値を扱う場合に使用します。たとえば、数値や文字列、真偽値などです。ref は、Vue インスタンスの data プロパティの代替として使用することができます。
ref の使用方法
以下の例では、count という名前の数値をラップする ref を作成しています。
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
return {
count
};
}
}このようにすると、Vue コンポーネント内で count という変数を追跡することができます。Vue 2 と同様に、count はリアクティブであり、変更があると自動的に更新されます。
<template>
<div>
<p>{{ count }}</p>
<button @click="count++">Add</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
return {
count
};
}
}
</script>ref の注意点
- ref で作成された変数を更新する場合、その変数を .value でラップする必要があります。例えば、count を更新する場合は count.value = 1 とする必要があります。
- ref で作成された変数は、Vue 2 の data プロパティと同じように、リアクティブなオブジェクトではなく、単一の値を返すオブジェクトです。
toRefs とは？
toRefs は、Vue 3 の Composition API でオブジェクトのプロパティを ref に変換するための関数です。これにより、オブジェクトの値を追跡できるようになります。toRefs は、Vue インスタンスの data プロパティを代替するために使用することができます。
toRefs の使用方法
以下の例では、user という名前のオブジェクトを toRefs 関数を使用して変換しています。
import { ref, toRefs } from 'vue';
export default {
setup() {
const user = {
name: 'John',
age: 30,
email: 'john@example.com'
};
const userRefs = toRefs(user);
return {
...userRefs
};
}
}このようにすると、Vue コンポーネント内で user の各プロパティを追跡することができます。user のプロパティを更新する場合は、プロパティ自体を更新するだけでよく、ラップする必要はありません。これは、toRefs によって各プロパティが ref に変換されているためです。
<template>
<div>
<p>Name: {{ name }}</p>
<p>Age: {{ age }}</p>
<p>Email: {{ email }}</p>
</div>
</template>
<script>
import { ref, toRefs } from 'vue';
export default {
setup() {
const user = {
name: 'John',
age: 30,
email: 'john@example.com'
};
const userRefs = toRefs(user);
return {
...userRefs
};
}
}
</script>toRefs の注意点
- toRefs で変換されたオブジェクトは、Vue 2 の data プロパティと同じように、リアクティブなオブジェクトではなく、各プロパティが ref に変換されたオブジェクトです。
- toRefs で変換されたプロパティは、更新時にプロパティ自体を更新するだけでよく、ラップする必要はありません。
ref と toRefs を一緒に使う
ref と toRefs を組み合わせることで、オブジェクトのプロパティと値を両方とも追跡できます。
import { ref, toRefs } from 'vue';
export default {
setup() {
const user = ref({
name: 'John',
age: 30,
email: 'john@example.com'
});
const userRefs = toRefs(user.value);
return {
...userRefs
};
}
}このようにすると、user の各プロパティと値を追跡することができます。user のプロパティを更新する場合は、user 自体を更新する必要があります。
<template>
<div>
<p>Name: {{ name }}</p>
<p>Age: {{ age }}</p>
<p>Email: {{ email }}</p>
<button @click="updateUser">Update</button>
</div>
</template>
<script>
import { ref, toRefs } from 'vue';
export default {
setup() {
const user = ref({
name: 'John',
age: 30
});
const userRefs = toRefs(user.value);
function updateUser() {
user.value.name = 'Jane';
user.value.age = 25;
user.value.email = 'jane@example.com';
}
return {
...userRefs,
updateUser
};
}
}
</script>この例では、updateUser 関数で user の各プロパティを更新しています。ボタンをクリックすると、user の値が更新され、変更が画面に反映されます。
まとめ
Vue3 の ref と toRefs を使うことで、単一の値やオブジェクトの値をリアクティブにすることができます。toRefs 関数を使用することで、オブジェクトの各プロパティと値をリアクティブにすることができます。また、ref と toRefs を組み合わせることで、オブジェクトのプロパティと値を両方とも追跡することができます。これらの機能を使用することで、Vue3 でより効率的にコードを記述することができます。