Vue中的watch

Vue中的watch

在Vue中，watch被用来监听数据的变化并做出相应的反应。它与computed属性的不同之处在于，computed属性是基于它所依赖的数据动态计算出的值，而watch则是用来监视数据的变化并做出相应的操作。

watch的基本用法

在Vue实例中，可以通过watch选项来定义一个或多个监听器。watch是一个对象，该对象的key是要监听的数据，value是一个回调函数，当数据发生改变时，回调函数会被触发执行。

new Vue({
  data: {
    message: 'hello',
    count: 0
  },
  watch: {
    message(newVal, oldVal) {
      console.log('message changed from', oldVal, 'to', newVal);
    },
    count(newVal, oldVal) {
      console.log('count changed from', oldVal, 'to', newVal);
    }
  }
})

在上面的示例中，当message或count的值发生变化时，对应的watch监听器会被触发，输出信息到控制台。

watch的深度监听

当我们需要监听数组或对象内部数据的变化时，可以使用deep选项来实现深度监听。默认情况下，Vue只会监听对象或数组本身的变化，而不会监听它们的属性或元素的变化。

new Vue({
  data: {
    obj: {
      a: 1,
      b: 2
    }
  },
  watch: {
    obj: {
      handler(newVal, oldVal) {
        console.log('obj changed from', oldVal, 'to', newVal);
      },
      deep: true
    }
  }
})

在上面的示例中，当obj对象内部的属性a或b发生变化时，watch监听器会被触发。

watch的立即执行

有时候我们希望在组件创建时立即执行一次watch监听器，可以使用immediate选项来实现。

new Vue({
  data: {
    message: 'hello'
  },
  watch: {
    message: {
      handler(newVal, oldVal) {
        console.log('message changed from', oldVal, 'to', newVal);
      },
      immediate: true
    }
  }
})

在上面的示例中，message的值在组件创建时就会被watch监听器立即执行一次。

watch的解绑

当不再需要监听数据的变化时，可以通过调用watch监听器返回的解绑函数来移除监听。

const unwatch = vm.$watch('message', callback);

// 移除监听
unwatch();

在上面的示例中，watch监听器返回的unwatch函数可以用来取消对message的监听。

watch的使用场景

watch通常用于监听数据的变化并做出相应的处理，比如在数据变化时发送网络请求、更新DOM、触发其他事件等。在实际开发中，watch可以帮助我们更好地响应数据的变化，提高组件的灵活性和交互性。

总而言之，watch是Vue提供的一种强大的数据监听机制，可以帮助我们更好地控制数据的变化，并做出相应的操作。通过灵活地运用watch，我们可以更加高效地开发Vue应用。