vue版本小于v2.7#

vue版本小于2.7，只能通过安装@vue/composition-api引入组合式api，有一点点性能影响，但是可以接受。

@vue/composition-api(必需)#

安装#

npm install @vue/composition-api
# or
yarn add @vue/composition-api

全局引入#

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

组件内使用组合式api#

<template>
  <div>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <h1>{{ count }}</h1>
  </div>
</template>

<script>
// 组合式api通过@vue/composition-api导入
import { defineComponent, ref } from "@vue/composition-api";
export default defineComponent({
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    const decrement = () => {
      count.value--;
    };
    return {
      count,
      increment,
      decrement,
    };
  },
});
</script>

unplugin-vue2-script-setup(可选)#

组合式api配合script setup才好用，但是@vue/composition-api无法直接使用script setup，需要安装unplugin-vue2-script-setup插件。一般vue2项目是是通过vue-cli/webpack搭建的，这里以vue-cli为例

安装#

npm i -D unplugin-vue2-script-setup
# or
yarn add -D unplugin-vue2-script-setup

// vue.config.js
const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default

module.exports = {
  parallel: false, // 关闭thread-loader, 和这个插件有冲突
  configureWebpack: {
    plugins: [
      ScriptSetup(),
    ],
  },
}

组件内调整为script setup#

<template>
  <div>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <h1>{{ count }}</h1>
  </div>
</template>

<script setup>
import { ref } from '@vue/composition-api'
const count = ref(0)
const increment = () => {
  count.value++
}
const decrement = () => {
  count.value--
}
</script>

vue版本大于v2.7#

组合式api通过vue依赖直接导入，也默认支持script setup，性能也更好。

<script setup>
import { ref } from "vue";
// ...
</script>

总结#

vue2.7版本使用组合式api更方便，vue2.7以下也能使用插件引入，也不麻烦。
引入组合式api之后，强烈建议把typesciprt也引入，参考。vue最舒适的开发方式是组合式api + script setup + typescript。
vue升级到2.7版本调整内容挺多，需要谨慎考虑。