Vue2.6 + TS + composition-api 项目升级至 Vue2.7

Vue2.7升级记录

以Vue2.6* + ts + compostion-api 项目为例

1、安装和删除依赖（依照官方指引）

• 安装Vue2.7.10

• 升级vuecli版本至当前项目使用的大版本的最新版本

• vue loader 升级至 ^15.10.0

• 升级 eslint-plugin-vue 至 9+，不然使用<script setup>会报声明未使用的错误

• 卸载composition-api

• 卸载vue-template-complier 依赖（ 谨慎! 如果有其他使用2.6版本vue的插件，不要删除，因为仍需要这个依赖）

npm i vue@2.7.10
npm i vue-loader@15.10.0
npm i eslint-plugin-vue@9.0.0
npm uninstall @vue/composition-api
npm uninstall vue-template-compiler // 未确认其他依赖关系下不建议删除
// 升级你的vuecli版本
 ~4.5.18 for v4
 ~5.0.6 for v5

2、全局替换原来的composition-api引入，改为从vue引入

import { ref } form ‘@vue/composition-api’
import { ref } form ‘vue’

3、如果要在script setup中继续使用this.$store、this.$router

可以使用vue提供的 getCurrentInstance ，为了方便做了一个封装

// 封装 useCurrentInstance.ts
import { getCurrentInstance } from 'vue';
import { Vue } from 'vue/types/vue'; 
// 在ts中，需要为getCurrentInstance的返回值进行类型断言，因为该方法返回值的类型定义为 { proxy: Vue } | null，使用vue上的方法会报错。
export function useCurrentInstance() {
  const root = getCurrentInstance() as { proxy: Vue };
  return root.proxy;
}

// 组件中使用
import { useCurrentInstance } from '@/hooks/useCurrentInstance';
const root = useCurrentInstance();
root.$router.push()
root.$store