vlambda博客
学习文章列表

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

通过前面几篇文章的了解,我相信大家一定对 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 进行暴露


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