50+Vue经典面试题源码级详解(51):Composition API 与 Options API 有什么不同

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第28天,点击查看活动详情

前言

小伙伴们好,这是村长《Vue经典面试题源码级详解》系列文章第 51 题,前面已完成题目合集在此: 历时一个月,2.6W字!50+Vue经典面试题源码级详解,你值得收藏!

学习群

我组织了一个面试学习群,关注村长公众号村长学前端,回复“加群”,大家一起卷~

相关学习资源

本系列有配套视频思维导图开源项目,大家学习同时千万不要忘了三连 + 关注 + 分享,有道是喝水不忘挖井人~

Composition API 与 Options API 有什么不同

分析

Vue3最重要更新之一就是Composition API,它具有一些列优点,其中不少是针对Options API暴露的一些问题量身打造。是Vue3推荐的写法,因此掌握好Composition API应用对掌握好Vue3至关重要。

image-20220629182639250

vuejs.org/guide/extra…


体验

Composition API能更好的组织代码

image-20220629182815578image-20220629183203082

例如上面代码,可以提取为useCount(),用于组合、复用

image-20220629184919471image-20220629184919471


思路

  • 总述不同点
  • composition api动机
  • 两者选择

回答范例

  • Composition API是一组API,包括:Reactivity API、生命周期钩子、依赖注入,使用户可以通过导入函数方式编写vue组件。而Options API则通过声明组件选项的对象形式编写组件。
  • Composition API最主要作用是能够简洁、高效复用逻辑。解决了过去Options APImixins的各种缺点;另外Composition API具有更加敏捷的代码组织能力,很多用户喜欢Options API,认为所有东西都有固定位置的选项放置代码,但是单个组件增长过大之后这反而成为限制,一个逻辑关注点分散在组件各处,形成代码碎片,维护时需要反复横跳,Composition API则可以将它们有效组织在一起。最后Composition API拥有更好的类型推断,对ts支持更友好,Options API在设计之初并未考虑类型推断因素,虽然官方为此做了很多复杂的类型体操,确保用户可以在使用Options API时获得类型推断,然而还是没办法用在mixins和provide/inject上。
  • Vue3首推Composition API,但是这会让我们在代码组织上多花点心思,因此在选择上,如果我们项目属于中低复杂度的场景,Options API仍是一个好选择。对于那些大型,高扩展,强维护的项目上,Composition API会获得更大收益。

可能的追问

  • Composition API能否和Options API一起使用?

猜你喜欢

转载自juejin.im/post/7114653124131815432