Vue2 像 Vue3 一样使用compostition-api

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

在使用 @vue/composition-api 前，必须先通过 Vue.use() 进行安装。之后才可使用新的 组合式 API 进行组件开发。

// main.ts
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

为了让 TypeScript 在 Vue 组件选项中正确地进行类型推导，我们必须使用defineComponent 来定义组件:

import { defineComponent } from '@vue/composition-api'
export default defineComponent({
  // 类型推断启用
})

使用模板

<template>
  <div>

  </div>
</template>

<script>
import {defineComponent, ref, reactive} from '@vue/composition-api'
export default defineComponent({
  setup() {
    return {}
  }
})
</script>

<style lang="scss" scoped>
</style>

Vue 组合式 API手册

Vue2 使用 <srcipt setup>

单文件组件 <script setup>

# 安装依赖包
pnpm add unplugin-vue2-script-setup -D

vite 配置

// vite.config.ts 中引入插件
import { defineConfig } from 'vite'
import ScriptSetup from 'unplugin-vue2-script-setup/vite'

export default defineConfig({
  plugins: [
    ScriptSetup({
      refTransform: true,
    }),
  ],
})

vue-cli 配置

// vue.config.js

module.exports = {
  parallel: false,  // disable thread-loader, which is not compactible with this plugin
  configureWebpack: {
    plugins: [
      require('unplugin-vue2-script-setup/webpack')({ /* options */ }),
    ],
  },
}

tsconfig.json 添加配置

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

使用模板

<template>
  <div>
		{{msg}}
  </div>
</template>

<script setup lang="ts">
import {ref, reactive} from '@vue/composition-api'

const msg = 'hello'
</script>

<style lang="scss" scoped>
</style>