Vue3必须用组合式API吗？能不能和选项式API混着用？会不会出问题？

terry 1小时前阅读数 17 #Vue

刚接触Vue3的开发者，不管是从零开始的新手还是从Vue2转场的老开发者，第一眼看到官方文档里“推荐使用组合式API（Composition API）”的提示，心里大概率都会犯嘀咕：难道用了快5年的选项式API（Options API）彻底没用了？要是自己以前攒了一堆Vue2的组件模板，是不是全得重写？还有如果某个小功能用组合式写顺手了，但大框架还是习惯用选项式的data、methods、computed，能不能放一起搭积木？搭起来会不会报错、会不会影响性能？今天就把这一串问题掰开揉碎讲清楚,让大家不用再纠结选边站。

组合式API不是强制要求，Vue3对两种写法完全兼容

很多人会被“官方推荐”这四个字吓到，其实官方文档的后半句还有更重要的补充——“如果你刚接触Vue，我们建议你从组合式API入手学习”，也就是说，组合式API是官方给新人和复杂项目准备的“升级工具包”，但不是所有人都得换，也不是所有项目都适用，Vue3的核心团队从一开始就把两种API的兼容性做到了极致，甚至可以说，如果你把项目里所有组合式API的部分删掉，剩下的代码就是纯纯的Vue3版选项式,连编译和运行都不会有任何区别。

举个最简单的例子,以前用Vue2写的计数器组件：

<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">加1</button>
  </div>
</template>
<script>
export default {
  name: 'Counter',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

直接把这段代码放到Vue3的项目里，不管是用Vite还是Webpack搭建的，只要配置好了Vue3的依赖，打开页面就能正常运行，按钮点一下计数加1，完全没有问题，而且Vue3还对选项式API做了一些小优化，比如对computed属性的缓存逻辑更精准了，减少了一些不必要的重新计算，所以哪怕纯用选项式API,项目性能也会比Vue2有一点点提升。

两种API可以放心混着用，但要注意几个小规则

既然不强制，那能不能混用？当然可以！而且官方其实也给出了混用的示例，这说明核心团队是支持这种灵活的开发方式的，不过混用的时候，还是要遵守几个小规则，不然可能会出一些莫名其妙的小bug,或者代码的可读性会变差。