Vue：对比于 Options API，为什么 Composition API 很香？

先说结论，对比于 Options API，Composition API 的优点主要有以下两点：

• 能够将代码按照功能进行封装，降低开发成本与后期维护成本，且让setup中的逻辑更清晰易读。
• 能够方便的实现代码逻辑复用。

我们通过动图对比一下 Options API 与 Composition API。

Options API 存在的问题

传统 Options API 中，新增或者修改一个需求，需要分别在 data，methods，computed，… 里进行修改 。

Composition API 的优势

可以更加优雅的组织我们的代码，函数。能够让相关功能的代码更加有序的组织在一起。

---

根据以上动图，我们能很直观的感受到 Composition API 的两大优点：代码组织清晰及逻辑复用。

下面我们用一个非常简单的小栗子，通过代码对比一下 Options API 和 Composition API 的具体使用。

预期效果如下图 ~

---

Options API 实现代码

App.vue

<template>
	<DemoA/>
	<DemoB/>
</template>

<script>
	import DemoA from './components/DemoA'
	import DemoB from './components/DemoB'
	export default {
		name: "App",
		components: { DemoA, DemoB }
	};
</script>

components/DemoA.vue

<template>
  <h1>{{ info }}</h1>
  <hr />
</template>

<script>
export default {
  name: "DemoA",
  data() {
    return {
      info: "我是DemoA组件",
    };
  },
  mounted() {
    console.log("我是DemoA组件");
  },
};
</script>

components/DemoB.vue

<template>
  <h1>{{ info }}</h1>
  <hr />
</template>

<script>
export default {
  name: "DemoB",
  data() {
    return {
      info: "我是DemoB组件",
    };
  },
  mounted() {
    console.log("我是DemoB组件");
  },
};
</script>

---

Composition API 实现代码

App.vue

<template>
	<DemoA/>
	<DemoB/>
</template>

<script>
	import DemoA from './components/DemoA'
	import DemoB from './components/DemoB'
	export default {
		name: "App",
		components: { DemoA, DemoB }
	};
</script>

components/DemoA.vue

<template>
  <h1>{{ info }}</h1>
  <hr />
</template>

<script>
import useInfo from "../hooks/useInfo";

export default {
  name: "DemoA",
  setup() {
    let info = useInfo("DemoA");
    return { info };
  },
};
</script>

components/DemoB.vue

<template>
  <h1>{{ info }}</h1>
  <hr />
</template>

<script>
import useInfo from "../hooks/useInfo";

export default {
  name: "DemoB",
  setup() {
    let info = useInfo("DemoB");
    return { info };
  },
};
</script>

hooks/useInfo.js

import { onMounted, ref } from "vue";

export default function (val) {
    onMounted(() => {
        console.log(`我是${val}组件`);
    });
    return ref(`我是${val}组件`); // 用 ref 则返回的数据是具有响应式的
}

其实 Composition API 的核心优势也就体现在以上的 hook 函数啦 ~

---

至此，Composition API 对比于 Options API 的主要优势就介绍完啦，希望对大家有所帮助 ~

如有疏漏欢迎评论留言指正哦 ~