应优先使用 onMounted 进行挂载后初始化，watchEffect 适用于依赖响应式数据且需在数据就绪或变化时立即执行的初始化场景，二者职责不同、可共存。
组件挂载后执行初始化逻辑，用 watchEffect 是可行的，但要注意它**默认立即执行**，且依赖响应式数据——它不是专门用来“等挂载完成”的工具。真正适合初始化的仍是 onMounted；而 watchEffect 的价值在于：当初始化依赖某些响应式状态、且这些状态可能在挂载前就已变化时，帮你自动同步执行。
什么时候该用 watchEffect 做初始化？
适用场景很明确：你的初始化动作需要读取并响应某个响应式变量（比如路由参数、父组件传入的 prop、全局 store 中的状态），而这个变量可能在组件创建时就已有值，也可能稍后才更新。你希望“只要它一有值或一变化，就立刻初始化一次”，而不是只在挂载那一刻执行。
- 例如：组件接收一个
idprop，需根据 id 请求详情 —— 若id在 setup 执行时已是有效值，watchEffect会立刻触发请求；若之后父组件更新了id，它还会再次触发 - 再如：监听
useRoute().params.id，用户直接访问带参数的 URL，路由解析完成前params.id可能为空，解析后变有效 ——watchEffect能捕捉到这个变化并启动初始化 - 不适用的情况：初始化纯 DOM 操作（如 focus 输入框）、调用第三方库的挂载后 API、或与任何响应式数据无关的固定逻辑 —— 这些请直接用
onMounted
正确写法：加守卫，避免重复或无效执行
watchEffect 默认懒执行（即 setup 里定义时就立即跑一次），但你要防止它在数据未就绪时乱请求。常用做法是内部加条件判断，或配合 ref 控制开关：
- 检查关键值是否有效：
if (!id || id === 'undefined') return - 用标志位避免重复初始化：
const inited = ref(false); if (inited.value) return; inited.value = true; - 结合
onBeforeUnmount清理副作用（如取消未完成的请求）
对比 onMounted：别混淆职责
onMounted 解决的是“DOM 就绪”问题，时机确定（挂载后一次）；watchEffect 解决的是“响应式依赖就绪+变化”问题，时机动态。两者不互斥，可以共存：
- 在
onMounted里做 DOM 相关初始化（如初始化图表容器、focus 元素） - 在
watchEffect里做数据驱动的初始化（如拉取接口、计算派生状态） - 甚至可以在
watchEffect内部，等数据加载完再手动触发 DOM 操作（需确保元素已挂载）
一个小而完整的例子
假设组件接收一个 userId prop，需加载用户信息：
setup(props) {
const user = ref(null);
const loading = ref(false);
watchEffect((onInvalidate) => {
if (!props.userId) return;
loading.value = true;
const controller = new AbortController();
// 支持取消
onInvalidate(() => controller.abort());
fetch(`/api/users/${props.userId}`, { signal: controller.signal })
.then(res => res.json())
.then(data => {
user.value = data;
})
.finally(() => {
loading.value = false;
});
});
return { user, loading };
}
这段代码会在 props.userId 出现时立即加载，后续变更也会重新加载，无需手动监听或写 watch。
