Vue3组合式API(Composition API)的使用案例

组合式API可以抽离出公共的函数或者抽离出相同功能的代码，使页面更加简洁。 为了更好的组合代码，可以创建统一规范的use函数。

在app.vue（根据自己的情况修改vue页面）

<template>
  <div>{{count}}</div>
</temolate>
<script setup>
    // 在vue中引入
    import useCount from './useCount.js'
    let {count, doubleCount} = useCount(1);
    console.log(count)
</script>

在你抽离的函数里面写

import {ref} from 'vue';
function count (num) {
  let count = ref(num);
  let dounbleCount = computed(()=>count.value*2);
  return {
    count,
    doubleCount
  }
}

export default useCount;

这样就可以根据自己的情况抽离出自己的代码了

参考：组合式 API 常见问答 | Vue.js

代码已经放至github：https://github.com/pan-0909/study/tree/main/CompositionApi，欢迎star⭐⭐！！