Vue3常见黑魔法与易错点
-
Composition API vs Options API
- 易错点1:在setup函数中误用
this
,实际上setup上下文中没有this
。 - 易错点2:未正确理解ref和reactive的区别和使用场景,导致状态管理混乱。
- 易错点3:在setup返回的对象中声明响应式数据,而非直接暴露。
- 易错点1:在setup函数中误用
-
Ref & Reactive
- 易错点4:未解包ref(
.value
)直接用于模板表达式或计算属性。 - 易错点5:深层对象属性变更未触发视图更新,忘记使用
reactive
包裹或.toRefs()
转换。
- 易错点4:未解包ref(
-
生命周期钩子
- 易错点6:在setup中使用
beforeCreate
、created
等旧版生命周期钩子。 - 易错点7:混淆setup执行时机,例如对DOM操作过早或过晚。
- 易错点6:在setup中使用
-
组件Props
- 易错点8:props传递后未进行默认值处理,导致非预期的结果。
- 易错点9:直接修改prop变量,违反单向数据流原则。
- 易错点10:在setup中未通过
defineProps
声明并使用props。
-
依赖注入
- 易错点11:错误地使用provide/inject,未理解其祖先-后代组件的关系绑定机制。
- 易错点12:在非setup语法中混用Provide/Inject与Options API中的
provide
和inject
。
-
Watch Effect & Watch
- 易错点13:未正确设置watchEffect的依赖收集,导致副作用重复执行或不执行。
- 易错点14:在watch回调中更改了正在观察的值,引发死循环。
-
Teleport
- 易错点15:teleport在动态渲染或条件渲染时的位置不确定性问题。
-
Suspense
- 易错点16:错误使用Suspense组件进行异步加载逻辑,未考虑边界情况。
-
自定义指令
- 易错点17:在Vue3中创建自定义指令时,忽视了新API
onBeforeMount
,onMounted
等钩子的使用。
- 易错点17:在Vue3中创建自定义指令时,忽视了新API
-
Vite / Vue CLI 配置
- 易错点18:项目配置文件中未正确设置Vue3的兼容性选项,导致构建错误。
-
TS类型提示与校验
- 易错点19:在TypeScript环境中未充分利用类型注解,导致类型安全失效。