Options API-选项式API
优点:新手上手简单,项目小简单清晰明了
缺点:
- 项目大了后,一个methods中可能包含很多个方法,往往分不清哪个方法对应着哪个功能,而且当你想要新增一个功能的时候你可能需要在 data,methods,computed,watch中都要写一些东西,但是这个时候每个选项里面的内容很多你需要上下来回的翻滚,特别影响效率。
- 命名容易冲突,容易覆盖引入mixin的页面属性;
- 问题追踪难度大,这个缺点还是由于名称冲突导致的。mixin多的话容易出现不容易定位的问题,数据来源不清晰;
Composition API-组合式API
缺点:学习成本可能会增加,以前的思维方式也要转变
优点:Composition API 是根据逻辑相关性组织代码的,提高可读性和可维护性,基于函数组合的 API 更好的重用逻辑代码(在vue2 Options API中通过Mixins重用逻辑代码,容易发生命名冲突且关系不清)
逻辑复用
在Vue2
中,我们是用过mixin
去复用相同的逻辑
下面举个例子,我们会另起一个mixin.js
文件:
export default {
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 "./mixin";
export default {
mixins: [mousePositionMixin]
};
</script>
使用单个mixin似乎问题不大,但是当我们一个组件混入大量不同的 mixins 的时候
mixins: [mousePositionMixin, fooMixin, barMixin, otherMixin]
会存在两个非常明显的问题:1、命名冲突;2、数据来源不清楚
现在通过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 };
}
在组件中使用:
<template>
<div>Mouse position: x {{ x }} / y {{ y }}</div>
</template>
<script>
import { useMove } from "./mixin";
import { toRefs } from "vue";
export default {
setup () {
const { position: position1 } = useMove();
const { x, y } = toRefs(position1);
return {
x,
y,
};
},
};
</script>
整个数据来源清晰明了,不会出现命名冲突的问题
选项式 API 的生命周期选项和组合式 API 之间的映射
生命周期钩子:
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'
export default {
setup() {
onBeforeMount(() => {
// ...
})
onMounted(() => {
// ...
})
onBeforeUpdate(() => {
// ...
})
onUpdated(() => {
// ...
})
onBeforeUnmount(() => {
// ...
})
onUnmounted(() => {
// ...
})
onActivated(() => {
// ...
})
onDeactivated(() => {
// ...
})
onErrorCaptured(() => {
// ...
})
}
}
总结
- 在逻辑组织和逻辑复用方面,
Composition API
是优于Options API
- 因为
Composition API
几乎是函数,会有更好的类型推断。 Composition API
对 tree-shaking 友好,代码也更容易压缩Composition API
中见不到this的使用,减少了this指向不明的情况- 如果是小型组件,可以继续使用
Options API
,也是十分友好的