在Vue2項目中使用composition-api和setup

公司項目除了由我創建的基本都是 Vue2 項目，眾所周知 Vue2 原先的插件 Vetur 需要開啟"vetur.experimental.templateInterpolationService"選項才能提供模板中代碼補全的能力，增加@vue/composition-api也是可以使用的，但是增加上用於解決使用 composition-api 造成 return 的變量過多問題的unplugin-vue2-script-setup就不太好使了，所以需要引入一些東西來增強這種開發環境下的體驗。

Vue2 使用 composition-api#

在 Vue3 還沒正式發布的時候 vue2 就有@vue/composition-api來支持在 vue2 中使用組合式 api 了。

@vue/composition-api

按照文檔中的給出的配置就可以使用了

增加對 Vue2 的 setup 語法糖支持#

unplugin-vue2-script-setup是 vue 團隊核心成員Anthony Fu基於他自己開發的對 Rollup 和 webpack 插件的兼容工具開發的一個讓 Vue2 項目也能使用 setup 語法糖甚至於 ref 語法糖的插件，具體使用方法可以去倉庫裡看。

但是使用上這個插件後，Vetur 的提示功能基本就下線了而且會提示沒有默認導出，開發體驗不是很好，接下來就是請出 Vue3 推薦的 Volar 了

使用 Volar#

雖然是 Vue3 專用的插件但是支持 Vue2 也是沒問題的。

首先 Volar 是使用@vue/runtime-dom來獲得對 Vue 文件的類型檢查，而 Vue2 中沒有這個包，所以我們需要手動安裝

npm install -D @vue/runtime-dom

然後在項目的 jsconfig.json 中增加下面兩個設置

{
  "compilerOptions": {
    "types": ["unplugin-vue2-script-setup/types"],
  },
  "vueCompilerOptions": {
    "experimentalCompatMode": 2
  }
}

關閉 Vetur 開啟 Volar 然後等待 Vue language server 啟動，打開 Vue 文件應該能享受到更加美好的開發體驗了。

一點不足#

對於 setup 語法糖引入的組件 Volar 不能很好的對其做出正確的代碼染色和類型補全，所以我建議將對組件的命名和子組件引入分開到另一個 script 代碼塊，如

<script>
import { defineComponent } from '@vue/composition-api'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent({
  name: 'App',
  components: { HelloWorld },
})
</script>
<script setup>
import { ref } from '@vue/composition-api'

const count = ref(0)
const countAdd = () => {
  count.value++
}
</script>

因為反正都要將組件命名的，正好也能解決這個小問題，那就這樣吧