Vue面试题49:Composition APl 与 Options API 有什么不同?(总结自B站up主‘前端杨村长’视频,仅供自用学习)
-
分析
-
composition API是vue3最重要更新之一;
-
它具有一系列优点,针对Options APl暴露的一些问题量身打造;
-
是vue3推荐的写法,掌握它对掌握好Vue3至关重要;
-
灵感源于react hooks, 又青出于蓝;
-
-
体验
- options api:
-
<template> <h1>{{ count }}</h1> <button @click="increment">click</button> </template> <script> export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } }, mounted() { console.log(`The initial count is ${this.count}`) } } </script>
- composition api:更好的逻辑复用和更灵活的代码组织
-
<template> <h1>{{ count }}</h1> <button @click="increment">click</button> </template> <script setup> import { useCount } from "../hooks/useCount" const { count, increment } = useCount() </script> // useCount.js import { ref } from "vue" export function useCount() { const count = ref(0) const increment = () => { count.value++ } return { count, increment, } }
-
思路
-
总述不同点;
-
开发动机;
-
如何选择;
-
-
回答范例
-
Composition API
是一组API,包括:Reactivity APl
、生命周期钩子、依赖注入,使用户可以通过导入函数方式编写vue组件,使得组件的可复用性、可维护性和可读性更强;而Options API
则通过声明组件选项的对象形式编写组件; -
Composition API
最主要作用是能够简洁、高效的复用逻辑;解决了过去options API
中mixins的各种缺点(命名冲突、来源不明);另外Composition API
具有更加敏捷的代码组织能力,很多用户喜欢options API
,认为所有东西都有固定位置的选项放置代码,但是单个组件增长过大之后这反而成为限制,一个逻辑关注点分散在组件各处,形成代码碎片,维护时需要反复横跳,而Composition API
则可以将它们有效组织在一起;最后composition API
拥有更好的类型推断,对ts支持更友好,options API
在设计之初并未考虑类型推断因素,虽然官方为此做了很多复杂的类型体操,确保用户可以在使用options API
时获得类型推断,然而还是没办法用在mixins和provide/inject上; -
vue3首推
Composition API
,但是这会让我们在代码组织上多花点心思,因此在选择上,如果我们项目中只有一些低复杂度的场景,options API
仍是一个好选择;而对于那些大型,高扩展,强维护的项目上,composstion API
会获得更大收益;
-
-
追问:
-
Composition API能否和Options API一起使用?
-
可以,你可以在一个选项式 API 的组件中通过
setup()
选项来使用组合式 API; -
和React Hooks的对比:> https://cn.vuejs.org/guide/extras/composition-api-faq.html#comparison-with-react-hooks
-