Vue 属性侦听，轻松掌握状态变化

2023-11-10 22:17:21

Vue 属性侦听的基本原理

Vue 属性侦听是基于 Vue 的响应式系统实现的。Vue 的响应式系统使用了一个名为 Dep（依赖）的类来管理属性和组件之间的依赖关系。当一个组件的属性值发生变化时，该属性对应的 Dep 对象会通知所有依赖它的组件，从而触发组件的更新。

Vue 的 watch 选项正是利用了这种机制来实现属性侦听。当你在 watch 选项中指定一个属性时，Vue 会自动创建一个 watcher（侦听器）来侦听该属性的变化。当属性值发生变化时，对应的 watcher 会被触发，执行你编写的处理逻辑。

Vue 属性侦听的用法

Vue 属性侦听的用法非常简单，你只需要在 Vue 实例中使用 watch 选项即可。watch 选项接受两个参数：

要侦听的属性名称或一个对象，对象键是属性名称，值是侦听函数。
一个函数，当被侦听的属性值发生变化时，该函数会被调用。

例如，以下代码演示了如何侦听一个名为 count 的属性的变化：

export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log('count changed from ${oldVal} to ${newVal}')
    }
  }
}

当 count 属性的值发生变化时，上面的代码会打印出 count 属性的新旧值。

你也可以使用 watch 选项侦听多个属性的变化，例如：

export default {
  data() {
    return {
      name: '',
      age: 0
    }
  },
  watch: {
    name: {
      handler(newVal, oldVal) {
        console.log('name changed from ${oldVal} to ${newVal}')
      },
      immediate: true
    },
    age: {
      handler(newVal, oldVal) {
        console.log('age changed from ${oldVal} to ${newVal}')
      }
    }
  }
}