浅谈Vue中监听属性—watch监听器的使用方法

目录

💡 监听属性的概念

💡 watch有什么作用

💡 watch的基本语法

💡 监听属性的优缺点

💡 使用watch的场景

---

💡 监听属性的概念

在计算机科学中，watch是一种调试技术，用于监视程序运行时特定变量的值。当程序在调试器控制下执行时，调试器会显示变量的当前值，并在程序执行过程中自动更新该值。

在Vue中，watch 是一种用于监测数据变化并做出回应的技术。watch 可以监听任何一个数据属性，并在该属性发生变化时执行指定的函数。

---

💡 watch有什么作用

watch 可以监听数据的变化，并在数据变化时执行所指定的回调函数。它可以做以下几件事情：

✔ 监听数据变化：watch 可以监听 Vue 实例上的任何数据变化，包括简单数据类型、对象、数组和计算属性等。

✔ 接收新旧值：当数据发生变化时，watch 回调函数会接受到两个参数，分别是新值和旧值，这可以方便我们比较数据变化，进一步做出相应的处理。

✔ 执行响应函数：watch 的主要作用就是执行我们所指定的响应函数，以便我们对数据变化作出及时的响应，如重新计算、渲染视图或发送网络请求等。

✔ 深度监听：watch 还可以通过配置 deep 选项来深度监听嵌套对象的变化，这样当嵌套对象中的属性发生变化时也能捕获到。

✔ 立即执行：watch 还可以通过配置 immediate 选项来在初始化组件时立即执行回调函数，而不必等待数据变化。

✔  取消监听：当一个 watch 监听器不再需要时，可以使用 unwatch 方法来取消监听。

综上所述，watch 可以监听数据变化并执行相应操作，这使得我们可以很方便地对数据变化做出处理和重新计算。在实际开发中，watch 经常被用来检测表单输入变化、监听状态变化以及优雅地处理异步操作等。

---

💡 watch的基本语法

// 对象式写法
watch: {
  // 监听的属性名
  属性名: {
    handler: function (newVal, oldVal) {
      // 对属性变化作出响应
    }
  }
}

// 函数式写法
watch: {
  // 监听的属性名，参数为新旧值
  '属性名'(newVal, oldVal) {
    // 对属性变化作出响应
  }
}

其中，handler 是一个函数，其第一个参数是属性的新值，第二个参数是属性的旧值。

属性名 是需要监听的属性名称。当属性发生变化时，watch 可以触发指定的响应函数来处理这个变化，比如，重新计算或发送请求等。

watch 可以监听对象、数组、计算属性等数据类型的变化，也可以通过 deep 选项来深度监听嵌套对象的变化，还可以使用 immediate 选项来立即执行回调函数。

通过示例来进一步了