Vue.js 监测属性变化：Vue Watch 揭秘

2023-08-16 21:19:56

Vue Watch：监测和响应组件中的属性变化

在 Vue.js 中，响应式编程是一个核心机制，它使组件能够自动跟踪和更新属性的变化。Vue Watch 是实现响应式编程的一种方法，它允许你监测组件中的属性变化并触发相应的操作。

Vue Watch 简介

Vue Watch 让你可以密切关注组件中属性的变化，并在变化发生时做出反应。你可以在组件选项中声明 watch 属性来使用 Vue Watch。watch 属性是一个对象，包含你要监测的属性以及相应的回调函数。当被监视的属性发生变化时，回调函数将被调用，你可以在此函数中执行相应的操作。

Vue Watch 的工作原理

Vue Watch 的工作原理很简单。当 Vue 实例被创建时，Vue Watch 会自动为每个被监视的属性创建一个 getter 和一个 setter 函数。当属性发生变化时，setter 函数会被调用，setter 函数会触发 Vue Watch 的回调函数。

Vue Watch 的使用场景

Vue Watch 可以用于多种场景，例如：

监测表单字段的变化并更新组件状态
监测组件中数据的变化并触发相应的操作
监测组件中生命周期函数的调用并执行相应的操作
监测组件中子组件的变化并触发相应的操作

Vue Watch 的两种写法

Vue Watch 有两种写法：

在组件选项中声明 watch 属性

这是最常见的一种使用 Vue Watch 的方式。这种写法非常简洁，并且可以在组件创建时就声明需要监测的属性。

export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`count changed from ${oldValue} to ${newValue}`)
    }
  }
}

使用 vm.$watch() 方法

这种写法更加灵活，你可以在组件创建之后动态地监测属性的变化。

export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    this.$watch('count', (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`)
    })
  }
}