在学习了vue3一些特性之后，我们可以在项目中简单的使用这些特性。现有项目如何平滑过渡到vue3，方便后期升级到Vue3，对于以前用vue2.x写的项目，我们可以通过引入composition-api，使用vue3中的新特性。

安装

npm install --save @vue/composition-api

全局引入

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

Vue.use(VueCompositionApi)

生命周期的变化

beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

页面实例

import { reactive, toRefs, onMounted, ref } from '@vue/composition-api'
import api from '@/api/schemeRange' // 和数据交互相关写在api 方便复用

export default {

  setup(props, { root }) {
    const scheme_options = reactive([
      { label: '核酸检测', value: 1 },
      { label: '核酸混采', value: 2 }
    ])
    // ----------------------------------------列表相关-----------------
    const listData = reactive({
      list: [],
      count: 0,
      scheme_id: 1,
      listLoading: false
    })
    // 加载数据
    const LoadList = () => {
      listData.listLoading = true
      api.GetRanges(listData.scheme_id).then(res => {
        listData.list = res.data.list
        listData.count = res.data.count
        listData.listLoading = false
      }).catch(() => {
        listData.listLoading = false
      })
    }
    
    onMounted(() => {
      LoadList()
    })
    // 暴露给模板的数据
    return {
      scheme_options,
      ...toRefs(listData), // 展开
      LoadList
    }
  }
}