如何让 Vue3 Composition API 代码看起来更函数式？

Posted 2021-04-09 一斤代码训练营

通过前面几篇文章的了解，我相信大家一定对 Vue 3.0 Composition API 的使用有了更直观的了解，在编写组件时，我们不再需要太多繁杂的选项，比如 data、computed、watch、methods 之类，而只剩下为数不多的几个如 props、components、setup 这样的选项。而我们的组件逻辑也被集中在了 setup 方法中，里面的代码也更偏向于函数式的编写风格了。

但是，对于追求更纯粹的函数式编程的开发人员来说，遗留下来的那些选项还是像一件 Options API 时代祖传的老棉袄，紧紧的裹着我们的代码！对于强迫症患者来说，这是一件不能容忍的事情！

好吧，为了解决这个问题，充满智慧的尤同志为我们做了一个语法糖，可以解决这个编码风格问题，改造后的代码的确会看起来更爽！

下面我们用前一篇文章中写的代码为例进行代码改造：

在该文章中 Page1.vue 组件内的 <script> 部分是这样的：

<script lang="ts">import { computed, defineComponent } from "vue";import { useStore } from "vuex";import { StoreState } from "@/store";
export default defineComponent({ setup() { // 1. 利用 useStore 函数来获取全局状态管理器实例 const store = useStore<StoreState>();
 // 2. 从全局状态管理器实例中获取 count 状态，并创建可进行响应式计算的值 const count = computed(() => store.state.count);
 // 3. 定义三个事件监听函数 const increase = () => store.dispatch("increase"); const decrease = () => store.dispatch("decrease"); const reset = () => store.dispatch("reset");
 // 4. 返回需要暴露给模板的内容 return { count, increase, decrease, reset }; },});</script>

而通过语法糖改造后，代码看起来就会像下面的代码：

<!-- 1. script 标签上多了 setup 属性 --><script lang="ts" setup>import { computed } from "vue";import { useStore } from "vuex";import { StoreState } from "@/store";
const store = useStore<StoreState>();
// 2. 需要暴露给模板的内容都使用 export 语法导出export const count = computed(() => store.state.count);export const increase = () => store.dispatch("increase");export const decrease = () => store.dispatch("decrease");export const reset = () => store.dispatch("reset");</script>

仔细观察一下改造后的代码，你会发现 <script> 标签上多了一个 setup 属性，而标签内的 defineComponent() 方法和对象参数都消失了，只留下原先需要写在 setup() 方法内的那些代码，但是这些代码也有略微变化：原先需要通过 return 暴露给模板 <template> 代码使用的内容现在都通过 export 进行暴露。

脱掉棉袄后的代码是不是看起来更简洁、更有范儿了呢？