围绕Vue 3 Composition API构建一个应用程序，包含一些最佳实践！

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

1. Vue 3和Composition API的状况

Vue 3已经发布了一年，它的主要新功能是：Composition API。从2021年秋季开始，推荐新项目使用Vue 3的 script setup 语法，所以希望我们能看到越来越多的生产级应用程序建立在Vue 3上。

这篇文章旨在展示一些有趣的方法来利用Composition API，以及如何围绕它来构造一个应用程序。

2. 可组合函数和代码重用

新的组合API释放了许多有趣的方法来重用跨组件的代码。复习一下：以前我们根据组件选项API分割组件逻辑：data、methods、created 等。

代码语言：javascript复制

//  选项API风格
data: () => ({
    refA: 1,
    refB: 2,
  }),
// 在这里，我们经常看到500行的代码。
computed: {
  computedA() {
    return this.refA   10;
  },
  computedB() {
    return this.refA   10;
  },
},

有了Composition API，我们就不会受限于这种结构，可以根据功能而不是选项来分离代码。

代码语言：javascript复制

setup() {
    const refA = ref(1);
        const computedA = computed(() => refA.value   10);
        /* 
        这里也可能是500行的代码。
        但是，这些功能可以保持在彼此附近!
        */
    const computedB = computed(() => refA.value   10);
        const refB = ref(2);

    return {
      refA,
      refB,
      computedA,
      computedB,
    };
  },

Vue 3.2引入了<script setup>语法，这只是setup()函数的语法糖，使代码更加简洁。从现在开始，我们将使用 script setup 语法，因为它是最新的语法。

代码语言：javascript复制

<script setup>
import { ref, computed } from 'vue'

const refA = ref(1);
const computedA = computed(() => refA.value   10);

const refB = ref(2);
const computedB = computed(() => refA.value   10);
</script>

在我看来，这是一个比较大想法。我们可以把这些功能分成自己的文件，而不是用通过放置 在script setup中的位置来保持它们的分离。下面是同样的逻辑，把文件分割开来的做法。

代码语言：javascript复制

// Component.vue
<script setup>
import useFeatureA from "./featureA";
import useFeatureB from "./featureB";

const { refA, computedA } = useFeatureA();
const { refB, computedB } = useFeatureB();
</script>

// featureA.js 
import { ref, computed } from "vue";

export default function () {
  const refA = ref(1);
  const computedA = computed(() => refA.value   10);
  return {
    refA,
    computedA,
  };
}

// featureB.js 
import { ref, computed } from "vue";

export default function () {
  const refB = ref(2);
  const computedB = computed(() => refB.value   10);
  return {
    refB,
    computedB,
  };
}

注意，featureA.js和featureB.js导出了Ref和ComputedRef类型，因此所有这些数据都是响应式的。

然而，这个特定的片段可能看起来有点矫枉过正。

• 想象一下，这个组件有500多行代码，而不是10行。通过将逻辑分离到use__.js文件中，代码变得更加可读。
• 我们可以在多个组件中自由地重复使用.js文件中的可组合函数 不再有无渲染组件与作用域槽的限制，也不再有混合函数的命名空间冲突。因为可组合函数直接使用了Vue的ref和 computed，所以这段代码可以与你项目中的任何.vue组件一起使用。

陷阱1：setup 中的生命周期钩子

如果生命周期钩子（onMounted，onUpdated等）可以在setup里面使用，这也意味着我们也可以在我们的可组合函数里面使用它们。甚至可以这样写：

代码语言：javascript复制

// Component.vue
<script setup>
import { useStore } from 'vuex';

const store = useStore();
store.dispatch('myAction');
</script>


// store/actions.js
import { onMounted } from 'vue'
// ...
actions: {
  myAction() {
    onMounted(() => {
            console.log('its crazy, but this onMounted will be registered!')
        })
  }
}
// ...

而且Vue甚至会在vuex内部注册生命周期钩子! (问题是：你应该