Vue.js 监视事件

Vue.js 是一款流行的 JavaScript 框架，它提供了多种方式来处理事件。其中一种方式就是通过 监视事件（watcher） 来处理数据的变化。

监视属性

可以在 Vue 实例中使用 watch 选项来声明一个监视器，以便在观察属性时执行自定义逻辑。

watch: {
  propA: function (newVal, oldVal) {
    // 值改变时的逻辑
  },
  // 深度监视
  'obj.propB': {
    handler: function (newVal, oldVal) { /* ... */ },
    deep: true
  }
}

上面代码中，我们声明了两个监视器。第一个监视器监视了 propA 属性，当该属性的值发生变化时，handler 回调函数会得到两个参数：新值 newVal 和旧值 oldVal。

第二个监视器监视了 obj.propB 属性，在深度监视开启的情况下，如果对象内部嵌套的属性发生变化，也会触发该监视器。

监视数组

使用 watch 实例选项监听数组时，也可以使用特殊语法 $watch，以便监视数组变异方法的调用。

data: {
  items: []
},
created: function () {
  this.$watch('items', function (newVal, oldVal) {
    // ...
  }, { deep: true })
}

上面代码中，我们在 created 生命周期函数中使用 $watch 监视了数组 items 的变化。在选项参数中，我们开启了深度监视。

监视路由

在 Vue.js 应用中通常会使用 Vue Router 管理路由。我们可以通过 watch 监视 $route 对象，以便在路由发生变化时执行自定义逻辑。

watch: {
  $route: function (to, from) {
    // ...
  }
}

上面代码中，我们声明了一个监视器，监视 $route 对象。当路由发生变化时，handler 回调函数会得到两个参数：目标路由 to 和来源路由 from。

总结

在 Vue.js 应用中，监视器提供了一种简单而且强大的方式来处理事件。使用 watch 选项可以轻松地监听对象、数组、路由等事件，并在事件发生时执行自定义逻辑。这是 Vue.js 监视事件的基础知识，通过不断练习和实践，我们可以更深入地理解和应用它们。