Vue3常见黑魔法与易错点

62 阅读2分钟

Vue3常见黑魔法与易错点

  1. Composition API vs Options API

    • 易错点1:在setup函数中误用this,实际上setup上下文中没有this
    • 易错点2:未正确理解ref和reactive的区别和使用场景,导致状态管理混乱。
    • 易错点3:在setup返回的对象中声明响应式数据,而非直接暴露。
  2. Ref & Reactive

    • 易错点4:未解包ref(.value)直接用于模板表达式或计算属性。
    • 易错点5:深层对象属性变更未触发视图更新,忘记使用reactive包裹或.toRefs()转换。
  3. 生命周期钩子

    • 易错点6:在setup中使用beforeCreatecreated等旧版生命周期钩子。
    • 易错点7:混淆setup执行时机,例如对DOM操作过早或过晚。
  4. 组件Props

    • 易错点8:props传递后未进行默认值处理,导致非预期的结果。
    • 易错点9:直接修改prop变量,违反单向数据流原则。
    • 易错点10:在setup中未通过defineProps声明并使用props。
  5. 依赖注入

    • 易错点11:错误地使用provide/inject,未理解其祖先-后代组件的关系绑定机制。
    • 易错点12:在非setup语法中混用Provide/Inject与Options API中的provideinject
  6. Watch Effect & Watch

    • 易错点13:未正确设置watchEffect的依赖收集,导致副作用重复执行或不执行。
    • 易错点14:在watch回调中更改了正在观察的值,引发死循环。
  7. Teleport

    • 易错点15:teleport在动态渲染或条件渲染时的位置不确定性问题。
  8. Suspense

    • 易错点16:错误使用Suspense组件进行异步加载逻辑,未考虑边界情况。
  9. 自定义指令

    • 易错点17:在Vue3中创建自定义指令时,忽视了新API onBeforeMount, onMounted 等钩子的使用。
  10. Vite / Vue CLI 配置

    • 易错点18:项目配置文件中未正确设置Vue3的兼容性选项,导致构建错误。
  11. TS类型提示与校验

    • 易错点19:在TypeScript环境中未充分利用类型注解,导致类型安全失效。