watch 初始化时不执行是因为默认只响应变化而非初始赋值；需显式配置 immediate: true 才能首次绑定后立即执行，但此时 DOM 可能未就绪，应配合 nextTick 使用，或优先考虑生命周期钩子。
watch 初始化时为什么没执行
因为 watch 默认只响应「变化」，不响应「初始赋值」。比如 data() 里定义了 searchQuery: '默认值'，然后写了 watch: { searchQuery() { ... } }，这个回调在页面首次加载时根本不会进——它要等你手动改一次输入框才会触发。
immediate: true 是唯一可靠方式
必须显式加 immediate: true 配置项，才能让监听器在绑定完成、数据就绪后立刻执行一次。注意它不是默认行为，漏写就等于白配。
- Vue 2 选项式写法：
searchQuery: { handler(newVal) { /* 这里会立即执行 */ }, immediate: true } - Vue 3
<script setup></script>写法：watch(searchQuery, (newVal) => { /* 同样需要 immediate */ }, { immediate: true }) - 监听多个值时也要带进去：
watch([a, b], ([na, nb]) => {}, { immediate: true })
immediate 执行时机有坑：别依赖 this.$refs 或 DOM
哪怕加了 immediate: true，回调执行时组件可能还没挂载完，this.$refs.xxx 还是 undefined，直接操作会报错。
- 错误示范：
watch(formValue, () => this.$refs.input.focus())—— 初次执行时this.$refs.input为空 - 正确做法：包裹
this.$nextTick(() => {...})（Vue 2）或nextTick(() => {...})（Vue 3）确保 DOM 已就绪 - 如果只是想初始化请求，且不依赖视图，那
immediate可以直接用；但凡牵扯到元素、样式、宽高计算，就必须等一帧
替代方案：created / onMounted 有时更合适
如果你的逻辑纯属「页面一打开就要干点啥」，和后续变化无关，那其实没必要硬套 watch + immediate。直接写在生命周期里更清晰、更可控。
- Vue 2：
created()或mounted()钩子中调用初始化函数 - Vue 3：
onMounted(() => loadInitialData()) - 只有当「初始动作」和「后续变化动作」逻辑高度一致（比如都是发请求查城市列表），才值得用
immediate统一入口
真正容易被忽略的是：immediate 不代表「数据已稳定」，它只代表「watcher 已建立，且当前值可用」。如果初始值来自异步接口、onLoad 中覆盖、或跨平台差异（比如小程序里 getStorageSync 返回时机不一致），那这个「当前值」本身可能就是空或旧的——得配合 loading 状态或防抖再兜一道。
