watchEffect可封装navigator.geolocation.watchPosition实现位置变化自动拉取数据，需用ref存储坐标、onInvalidate清理请求、onUnmounted清除监听，并单独处理权限错误与节流防抖。
Vue.js 的 watchEffect 本身不直接支持地理位置监听，但它非常适合封装和响应 navigator.geolocation.watchPosition 的变化，实现“位置一变、数据即拉”的实时更新逻辑。
用 watchEffect 封装地理位置监听
watchEffect 会自动追踪其内部读取的响应式数据，并在变化时重新执行。虽然地理位置 API 本身不是响应式的，但你可以把经纬度存入 ref 或 reactive 对象，再在 watchEffect 中读取它——这样位置更新就会触发副作用（比如发起请求）。
- 先用
navigator.geolocation.watchPosition持续监听位置，每次成功回调中更新latRef和lngRef - 在
watchEffect内部读取这两个 ref，同时调用你的数据获取函数（如fetchWeather(lat, lng)） - 注意：
watchEffect默认是同步执行的，首次运行会立即拉取一次；若需避免初始请求，可用{ flush: 'post' }或加守卫逻辑
防抖与节流控制请求频率
浏览器可能高频触发 watchPosition 回调（尤其在移动中），直接每次变更都拉取接口容易超限或浪费资源。
- 推荐在
watchEffect外部用lodash.throttle或原生setTimeout包裹数据拉取函数，例如限制为 30 秒内最多一次 - 也可结合
watchEffect的清理函数，在新副作用启动前取消上一次未完成的请求（适用于 Axios 等支持 cancel token 的客户端） - 简单场景下，直接比较前后坐标距离：只有位移超过 50 米才更新 ref，从而避免
watchEffect无谓触发
处理权限与错误状态
watchEffect 只响应数据变化，不处理地理 API 的权限拒绝、定位失败等异步错误。
- 必须单独监听
watchPosition的 error 回调，把错误类型（如PERMISSION_DENIED）存入响应式状态，并在 UI 中提示用户手动开启定位 - 可使用
onInvalidate在watchEffect清理时调用clearWatch，确保组件卸载时停止监听，避免内存泄漏 - 建议将整个地理位置模块抽成组合式函数（
useGeolocation），统一管理状态、监听、清理和错误映射
完整示例片段（组合式 API）
以下为关键逻辑示意，不含 UI 渲染：
import { ref, watchEffect, onUnmounted } from 'vue'
export function useGeolocation() {
const lat = ref(null)
const lng = ref(null)
const error = ref(null)
let watchId = null
const start = () => {
if (!navigator.geolocation) {
error.value = '浏览器不支持定位'
return
}
watchId = navigator.geolocation.watchPosition(
(pos) => {
lat.value = pos.coords.latitude
lng.value = pos.coords.longitude
error.value = null
},
(err) => {
error.value = err.message
},
{ enableHighAccuracy: true, timeout: 5000 }
)
}
// 自动响应 lat/lng 变化并拉取数据
watchEffect((onInvalidate) => {
if (lat.value == null || lng.value == null) return
const controller = new AbortController()
onInvalidate(() => controller.abort())
fetch(`/api/weather?lat=${lat.value}&lng=${lng.value}`, {
signal: controller.signal
})
.then(res => res.json())
.then(data => console.log('天气数据:', data))
})
onUnmounted(() => {
if (watchId !== null) navigator.geolocation.clearWatch(watchId)
})
return { lat, lng, error, start }
}
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
