Vue2 監視監視

Vue2 では、watch を使用してデータの変更を監視し、データが変更されたときにいくつかの操作を実行できます。この機能は Vue2 の非常に強力な機能で、1 つ以上のデータの変更を監視し、それに応じて対応するのに役立ちます。

監視構文

watch を使用するには、次のように Vue コンポーネントのオプションで watch オブジェクトを宣言する必要があります。

复制代码
export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newCount, oldCount) {
      console.log(`count变成了${newCount}，之前是${oldCount}`)
    }
  }
}

監視オブジェクトの各プロパティはキーと値のペアであり、キーは監視するデータの名前を表し、値は関数です。この関数のパラメータには、新しい値と古い値の 2 つの値が含まれており、データが変更されるとトリガーされます。

リアルタイム応答

監視リスナーは Vue の応答システムと適切に統合できるため、データが変更されたときにタイムリーに応答できます。たとえば、ユーザーがテキストを入力すると、watch を使用して入力ボックスの値を監視し、ユーザーが次のように入力したときにステータスをリアルタイムで更新できます。

复制代码
<input v-model="inputValue" />
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  watch: {
    inputValue(newValue, oldValue) {
      console.log(`输入框的值从${oldValue}变为了${newValue}`)
    }
  }
}

ディープモニタリング

Vue2 では、prop オブジェクトの deep 属性を通じて詳細な監視を実行できます。このプロパティのデフォルトは false で、詳細な監視は行われないことを意味します。オブジェクトまたは配列の変更を監視する必要がある場合は、このプロパティを true に設定する必要があります。

例：

复制代码
export default {
  props: {
    obj: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    obj: {
      deep: true,
      handler(newObj, oldObj) {
        console.log('obj发生了变化')
      }
    }
  }
}

監視監視を解除する

開発中、場合によっては監視リスナーをキャンセルする必要があります。$watch メソッドを使用すると、監視リスナーを手動で追加したり、コンポーネントインスタンスから削除したりできます。このメソッドの最初のパラメータは監視するデータの名前で、2 番目のパラメータは実行するコールバック関数を示します。

例：

复制代码
export default {
  data() {
    return {
      count: 0
    }
  },
  created() {
    this.stopWatch = this.$watch('count', (newCount, oldCount) => {
      console.log(`count变成了${newCount}，之前是${oldCount}`)
    })
  },
  methods: {
    stopWatching() {
      this.stopWatch()
    }
  }
}

上の例では、コンポーネントの作成時に $watch メソッドを通じて監視リスナーを追加し、それを stopWatch 変数に保存しました。このリスナーをキャンセルする必要がある場合は、この変数を呼び出すだけです。

要約する

監視リスナーを通じて、データの変更をリアルタイムで監視し、データが変更されたときに対応する操作を実行できます。$watch メソッドを使用して、リスナーを手動で追加したり、コンポーネントインスタンスからリスナーを削除したりすることもできます。これは Vue2 の非常に強力な機能であり、データの管理と維持を改善するのに役立ちます。

監視構文

リアルタイム応答

ディープモニタリング

監視監視を解除する

要約する

おすすめ