Options Api🐻
- Options API,即打家常说的选项API,即以vue为后缀的文件,通过定义methods,computed,watch,data等属性与方法,共同处理页面逻辑👰
如下:
通常使用Vue2开发的项目,普遍会存在以下问题:👨👦
- 代码的可读性随着组件变大而变差🐎
- 每一种代码复用的方式,都存在缺点👁️🗨️
- TypeScript支持有限💣
以上通过使用Composition Api都能迎刃而解😷
Composition
- 在Vue3 Composition API中,组件根据逻辑功能来组织的,一个功能所定义的所有API会放在一起(更加的高内聚,低耦合)✌️即使项目很大,功能很多,我们都能快速的定位到这个功能所用到的所有API👨
对比
- Options API处理大型的组件时,会使得各个逻辑中的属性和方法变得难以理解和维护,选项的分离掩盖了潜在的逻辑问题🤽而Composition API正是解决了这个问题,将某个逻辑相关的代码全放在一个函数里,这样当需要修改一个功能时,就不再需要在文件里去到处寻找🐮
2.在Vue2中,我们是用过mixin去复用相同的逻辑🤒
- 下面举个例子,我们会另起一个mixin.js文件👨👦
export const MoveMixin = { data() { return { x: 0, y: 0, }; }, methods: { handleKeyup(e) { console.log(e.code); // 上下左右 x y switch (e.code) { case "ArrowUp": this.y--; break; case "ArrowDown": this.y++; break; case "ArrowLeft": this.x--; break; case "ArrowRight": this.x++; break; } }, }, mounted() { window.addEventListener("keyup", this.handleKeyup); }, unmounted() { window.removeEventListener("keyup", this.handleKeyup); }, };
然后在组件中使用🚵
<template> <div> Mouse position: x {{ x }} / y {{ y }} </div> </template> <script> import mousePositionMixin from './mouse' export default { mixins: [mousePositionMixin] } </script>
使用单个mixin似乎问题不大,但是当我们一个组件混入大量不同的 mixins 的时候😧
mixins: [mousePositionMixin, fooMixin, barMixin, otherMixin]
会存在两个非常明显的问题:🤒
- 命名冲突👵
- 数据来源不清晰🏇
- 现在通过Compositon API这种方式改写上面的代码💀
import { onMounted, onUnmounted, reactive } from "vue"; export function useMove() { const position = reactive({ x: 0, y: 0, }); const handleKeyup = (e) => { console.log(e.code); // 上下左右 x y switch (e.code) { case "ArrowUp": // y.value--; position.y--; break; case "ArrowDown": // y.value++; position.y++; break; case "ArrowLeft": // x.value--; position.x--; break; case "ArrowRight": // x.value++; position.x++; break; } }; onMounted(() => { window.addEventListener("keyup", handleKeyup); }); onUnmounted(() => { window.removeEventListener("keyup", handleKeyup); }); return { position }; }
在组件中使用🤢可以看到,整个数据来源清晰了,即使去编写更多的 hook 函数,也不会出现命名冲突的问题😡
<template> <div> Mouse position: x {{ x }} / y {{ y }} </div> </template> <script> import { useMove } from "./useMove"; import { toRefs } from "vue"; export default { setup() { const { position } = useMove(); const { x, y } = toRefs(position); return { x, y, }; }, }; </script>
小结
- 在逻辑组织和逻辑复用方面,Composition API是优于Options API🤰
- 因为Composition API几乎是函数,会有更好的类型推断😶
- Composition API对 tree-shaking 友好,代码也更容易压缩👯
- Composition API中见不到this的使用,减少了this指向不明的情况🙋
- 如果是小型组件,可以继续使用Options API,也是十分友好的👩👧👧