Vue.jsのwatchとcomputedの違いを理解する

Vue.js の watch と computed は、データの変更を検知し、対応する処理を実行するために使用されます。ただし、それぞれ異なる目的と使用方法があります。

watch: コンポーネントのデータが変更されたときに、特定の処理を実行するために使用されます。watch オプションを使用すると、特定のデータの変更を監視し、変更時に特定の処理を実行できます。

watch: {
  message(newVal, oldVal) {
    console.log(`message changed from ${oldVal} to ${newVal}`)
  }
}

computed: コンポーネントのデータが変更されたときに、他のデータに依存しているプロパティを計算し直すために使用されます。 computed オプションは、データに依存している計算プロパティを定義し、変更時に自動的に更新します。

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('')
  }
}

結論:

watch オプションは、特定のデータの変更を監視し、変更時に特定の処理を実行するために使用します。 computed オプションは、データに依存している計算プロパティを定義し、変更時に自動的に更新するために使用します。 通常、computed オプションは、データに依存している計算結果を返す場合に使用し、watch オプションは、データの変更に対して何らかの処理を実行する場合に使用します。