Vue 3のwatch機能は、複数のデータをリッスンして反応する強力なツールです。このブログでは、その基礎から高度な応用まで、watchを使いこなすためのテクニックや実践的な方法に焦点を当てます。データの監視とリアルタイムな反応をもたらすこの機能のマスターを目指しましょう。
Vue3のwatch機能入門
watch機能の基礎
Vue 3におけるwatch機能は、データの変更をリッスンし、その変更に応じて特定の処理を実行する強力なツールです。基本的な構文は以下のようになります。
// インスタンスの作成
const app = Vue.createApp({
data() {
return {
message: '初期値'
}
},
watch: {
// 監視対象のデータを指定
message(newValue, oldValue) {
// データが変更されたときの処理
console.log('新しい値:', newValue, '古い値:', oldValue);
}
}
});
// アプリをマウント
const vm = app.mount('#app');
// データの変更
vm.message = '新しいメッセージ';上記の例では、messageというデータをwatchしています。messageの値が変更されるたびに、コンソールに新しい値と古い値が表示されます。これにより、特定のデータの変更を監視して、必要な処理を行うことができます。
このように、Vue 3のwatch機能を使うことで、データの変更をリアルタイムに把握し、それに応じたアクションを実行することが可能です。
単一データの監視と反応
watchを使って単一のデータを監視することで、そのデータの変更に応じて特定の処理を行うことができます。以下はその基本的な例です。
const app = Vue.createApp({
data() {
return {
counter: 0
}
},
watch: {
counter(newValue, oldValue) {
console.log('新しい値:', newValue, '古い値:', oldValue);
// 例えば、カウンターが変更されたら特定の処理を実行する
// ここでは、カウンターが10を超えたらリセットする例を示します
if (newValue > 10) {
this.counter = 0; // カウンターリセット
}
}
}
});
const vm = app.mount('#app');
// 1秒ごとにカウンターをインクリメント
setInterval(() => {
vm.counter++;
}, 1000);この例では、counterというデータをwatchしています。counterの値が変更されるたびに、コンソールに新しい値と古い値が表示されます。さらに、カウンターが10を超えるとカウンターがリセットされる処理が行われます。
watchを使うことで、特定のデータの変更に対してカスタムな処理を実行することができます。
複数データの同期と管理
複数のデータをwatchする方法
複数のデータをwatchする際には、オブジェクト内で複数のプロパティを指定することで監視を行います。以下はその例です。
const app = Vue.createApp({
data() {
return {
firstName: 'John',
lastName: 'Doe',
age: 30
}
},
watch: {
// 複数のプロパティを指定して監視
firstName(newValue, oldValue) {
console.log('First Nameの変更:', newValue, oldValue);
},
lastName(newValue, oldValue) {
console.log('Last Nameの変更:', newValue, oldValue);
},
age(newValue, oldValue) {
console.log('年齢の変更:', newValue, oldValue);
}
}
});
const vm = app.mount('#app');
// データを変更してwatchの動作を確認
setTimeout(() => {
vm.firstName = 'Jane';
vm.lastName = 'Smith';
vm.age = 35;
}, 2000);この例では、watchオプションでfirstName、lastName、ageの3つのデータを監視しています。各データが変更されるたびに、それぞれの変更をコンソールに表示します。
watchを使用することで、複数のデータの変更を監視し、それぞれに特定の処理を関連付けることができます。
動的なデータ監視と条件付き反応
動的なwatchを使うと、データの変更に対して柔軟に反応することができます。また、特定の条件が満たされたときにのみ反応するように設定することも可能です。
const app = Vue.createApp({
data() {
return {
currentValue: '',
dynamicKey: 'age',
person: {
name: 'John',
age: 30
}
}
},
watch: {
// 動的に監視するプロパティを指定
[dynamicKey](newValue, oldValue) {
console.log(`${dynamicKey}の変更 - 新しい値:`, newValue, '古い値:', oldValue);
// ageが変更された場合の条件付き反応
if (dynamicKey === 'age' && newValue > 40) {
console.log('40歳を超えました！');
// 何か特別な処理を行う...
}
}
}
});
const vm = app.mount('#app');
// 2秒後にpersonオブジェクトのageを変更してwatchの動作を確認
setTimeout(() => {
vm.person.age = 45;
}, 2000);この例では、dynamicKeyという動的な変数を用いてwatchで監視するプロパティを動的に選択しています。personオブジェクト内のageが変更されるたびに、watchが反応します。また、ageが40を超えた場合に特別な処理を実行する条件付きの反応も設定されています。
動的なwatchを利用することで、特定の条件下でのみデータの変更を監視し、それに対して適切なアクションを実行することが可能です。
コメント