vue侦听器详解及代码

在 Vue 中，我们可以使用侦听器（watcher）来监听数据的变化，并在数据发生变化时执行相应的操作。Vue 提供了 watch 选项来定义侦听器，并可以使用 vm.$watch 方法来创建侦听器。

下面是一个简单的示例，我们监听一个数据 message 的变化，在数据发生变化时将新值和旧值打印到控制台中：

<template>
  <div>{{ message }}div>
template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`数据发生变化了，新值：${newValue}，旧值：${oldValue}`)
    }
  }
}
script>

当我们修改 message 的值时，侦听器会自动执行，并将新值和旧值打印到控制台中：

this.message = 'Hello, World!'
// 控制台输出：数据发生变化了，新值：Hello, World!，旧值：Hello, Vue!

除了使用 watch 选项来定义侦听器外，我们还可以使用 vm.$watch 方法来创建侦听器。下面是一个使用 vm.$watch 方法创建侦听器的示例：

<template>
  <div>{{ message }}div>
template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  created() {
    this.$watch('message', (newValue, oldValue) => {
      console.log(`数据发生变化了，新值：${newValue}，旧值：${oldValue}`)
    })
  }
}
script>

需要注意的是，当我们在 watch 或 vm.$watch 中处理数据时，应该避免直接修改原始数据，而应该通过使用 Vue 提供的 API 来修改，例如使用 this.$set 或 this.$delete 方法来修改数组或对象。这样可以确保 Vue 能够监听到数据的变化并及时更新视图。