正文
大家在 Vue3 + script setup 开发中，经常会遇到一些明明代码看着没问题，却死活不生效的场景。今天整理了高频问题 + 可直接复制的修复方案，建议收藏。
1. ref 获取 DOM 为 undefined
问题：
<script setup>
const dom = ref(null)
console.log(dom.value) // undefined
</script>
<template>
<div ref="dom"></div>
</template>
原因：DOM 还没挂载就执行了代码。
解决：
onMounted(() => {
console.log(dom.value)
})
2. reactive 赋值后失去响应式
问题：
const data = reactive({ list: [] })
data.list = await fetchList() // 看似没问题，有时会失效
原因：直接覆盖会破坏响应式代理。
解决：
data.list = [...newList]
// 或
Object.assign(data, { list: newList })
3. computed 不更新
原因：依赖没有被正确追踪，比如依赖异步数据。
解决：确保依赖是响应式数据，不要在 computed 里做异步。
4. defineProps 解构失去响应式
错误写法：
const { name } = defineProps(['name'])
解决：
const props = defineProps(['name'])
const name = computed(() => props.name)
或使用 toRefs。
5. watch 监听 reactive 对象不触发
解决：开启 deep
watch(data, () => {}, { deep: true })
6. 父组件调用子组件方法报错
解决：子组件必须用 defineExpose 暴露
const fn = () => {}
defineExpose({ fn })
7. 样式 scoped 后修改第三方组件样式无效
解决：
:deep(.el-button) {
color: red;
}
8. 页面刷新后路由守卫获取不到 store 数据
原因：路由执行比 Pinia/Vuex 初始化快。
解决：在路由守卫里加 nextTick 或等待初始化完成。
总结
Vue3 大部分坑都来自：
- 生命周期执行顺序
- 响应式丢失
- 作用域隔离
- 异步时序
把这些坑记住，开发效率至少提升 50%。
个人观点·仅供参考
