Vue3中watch的应用场景

在 Vue 中，watch 用于监听数据的变化并执行相应的操作，适用于需要在数据变化时进行复杂处理或异步操作的场景。以下是一些常见的应用场景：

数据变化时的异步操作

当需要在数据变化后发起 API 请求、执行定时器等异步操作时，watch 是合适的选择。

例如：监听搜索关键词变化，延迟发送搜索请求以避免频繁调用接口：
javascript 复制代码
```
watch: {
  searchQuery(val) {
    // 清除之前的定时器
    clearTimeout(this.timer);
    // 延迟 500ms 执行搜索
    this.timer = setTimeout(() => {
      this.fetchSearchResults(val); // 调用接口的方法
    }, 500);
  }
}
```

监听路由变化

在单页应用中，需要根据路由参数的变化更新页面内容时，可以监听 $route：

javascript 复制代码

    watch: {
      '$route.params.id'(newId) {
        // 当路由中的 id 变化时，重新加载对应的数据
        this.loadData(newId);
      }
    }

复杂数据转换或计算

当数据变化后需要进行复杂的转换或计算（超出 computed 的简单依赖关系）时，使用 watch：

javascript 复制代码

watch: {
  userInfo(newVal) {
    // 当用户信息变化时，解析并处理多个字段
    this.fullName = `${newVal.firstName} ${newVal.lastName}`;
    this.isAdult = newVal.age >= 18;
    // 可能还包含其他复杂逻辑
  }
}

监听对象 / 数组的深层变化

对于对象或数组的深层属性变化，watch 可以通过 deep: true 配置进行监听：

javascript 复制代码

watch: {
  'form.user.name': {
    handler(newVal) {
      // 监听对象深层属性变化
      console.log('用户名变为：', newVal);
    },
    deep: true // 开启深层监听
  }
}

初始化时立即执行监听逻辑 通过 immediate: true 配置，可以让监听在组件初始化时立即执行一次：

javascript 复制代码

watch: {
  defaultLanguage: {
    handler(val) {
      this.loadLanguagePack(val);
    },
    immediate: true // 初始化时就执行一次
  }
}

注意：watch 更适合处理 "副作用"（如异步操作、DOM 操作），而简单的依赖计算应优先使用 computed，因为 computed 具有缓存机制，性能更优。