Vue3:Watch 监听器

1、什么是 watch 侦听器

• watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。例如，监视用户名的变化并发起请求，判断用户名是否可用。

2、 watch 侦听器的基本语法

• 开发者需要在 watch 节点下，定义自己的侦听器。实例代码如下
  watch用法

3、 使用 watch 检测用户名是否可用

• 监听 username 值的变化，并使用 axios 发起 Ajax 请求，检测当前输入的用户名是否可用：
  watch使用

4、immediate 选项

• 默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使用 immediate 选项。实例代码如下：
  immediate选项

5、 deep 选项

• 当 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选项，代码示例如下：
  deep选项

6、监听对象单个属性的变化

• 如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch 侦听器：
  单个属性变化

7、计算属性 vs 侦听器

• 计算属性和侦听器侧重的应用场景不同：
  • 计算属性侧重于监听多个值的变化，最终计算并返回一个新值
  • 侦听器侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值