面试真题—Vue3的 Composition Api 与 Vue2的 Options Api 有什么不同？

通常使用 Vue2 开发的项目，会存在以下问题：
• 代码的可读性随着组件变大而变差
• 每一种代码复用的方式，都存在缺点
• TypeScript支持有限
以上通过使用 Composition Api 就能解决

1. Options Api

1.Options API ，即大家常说的选项API，即以 vue 为后缀的文件，通过定义 methods ，computed ， watch ， data 等属性与方法，共同处理页面逻辑；

选项式API	
import { defineStore } from "pinia";
export let useCounter = defineStore('counter',{
	state(){
		return {
			count:10
		}
	},
	getters:{
		double(){
			return count * 2;
		}
	},
	actions:{
		add(){
			this.count++;
		}
	}
})

当组件变得复杂，导致对应属性的列表也会增长，这可能会导致组件难以阅读和理解；

2.Composition Api

组合式API

import { ref, computed } from "vue";
import { defineStore } from "pinia";

// 声明变量的同时暴出，这是分别暴露
export const useCounterStore = defineStore("counter", () => {
	const count = ref(10);
	const doubleCount = computed(() => count.value * 2);
	function increment() {
		count.value++;
	}

	return { count, doubleCount, increment };
});

3. 对比

1.逻辑组织

选项式的碎片化使得理解和维护复杂组件变得困难，选项的分离掩盖了潜在的逻辑问题；
Compositon 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 };
}

在组件中使用：

<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>

可以看到，整个数据来源清晰了，即使去编写更多的 hook 函数，也不会出现命名冲突的问题；

4.总结

• 在逻辑组织和逻辑复用方面， Composition API 是优于 Options API
• 因为 Composition API 几乎是函数，会有更好的类型推断。
• Composition API 对 tree-shaking 友好，代码也更容易压缩
• Composition API 中见不到 this 的使用，减少了 this 指向不明的情况
• 如果是小型组件，可以继续使用 Options API ，也是十分友好的