用 watchEffect 可自动追踪响应式地理位置变化并触发天气请求：通过 ref 存储经纬度，内部直接使用即自动依赖；配合 AbortController 避免请求冲突，用 loading/error/weather 状态反馈 UI；首次定位需单独调用 getCurrentPosition。
用 watchEffect 实现基于位置的实时天气更新，核心在于：自动追踪地理位置变化，并在变化后触发异步天气请求，同时合理处理加载、错误和取消逻辑。它比手动监听 watch 更简洁，尤其适合“响应式副作用”场景。
自动监听位置并触发天气请求
watchEffect 会自动收集其内部访问的响应式数据依赖。只要把地理位置（比如 userLocation）当作响应式状态使用，它一变，天气请求就会自动重发：
- 定义一个
ref或computed存储当前经纬度，例如：const userLocation = ref({ lat: 0, lng: 0 }) - 在
watchEffect内直接使用userLocation.value，Vue 就会自动追踪它； - 调用
fetchWeather(userLocation.value)即可——无需手动写watch的回调和依赖数组。
安全处理异步请求与重复触发
用户位置可能频繁微调（如 GPS 晃动），导致请求堆积。需避免旧请求覆盖新结果或报错：
- 用
AbortController主动中止上一次未完成的请求：const controller = new AbortController()，并在发起fetch时传入{ signal: controller.signal }； - 每次进入
watchEffect时，先调用controller.abort()（若存在旧控制器），再新建一个； - 注意捕获
AbortError，避免它变成未处理异常（可用if (err.name === 'AbortError') return忽略）。
整合加载与错误状态反馈
用户需要感知“正在获取”“获取失败”等状态，这些应作为响应式状态暴露给模板：
- 定义
const loading = ref(false)、const error = ref(null)、const weather = ref(null)； - 在
watchEffect开头设loading.value = true，出错时赋值error.value，成功后更新weather.value并清空error； - 模板中可直接用
v-if="loading">加载中...、v-else-if="error">{{ error.message }}等做条件渲染。
补充：首次定位与权限处理
watchEffect 不负责获取初始位置，这部分需单独调用 navigator.geolocation.getCurrentPosition，并在成功后赋值给 userLocation：
- 建议封装一个
useGeolocation()组合式函数，返回location、loading、error； - 首次调用后，
watchEffect自然响应并拉取天气； - 若用户拒绝权限，
userLocation保持初始值，watchEffect不会误触发（除非你主动改了它）。
