vue2.7升级记录

vue3版本发布时间也不短了，但是还没有在项目中实际跑过。为了体验vue3的组合式API新特性和以后项目能够无缝升级到3.0版本，决定先将项目升级到2.7版本。在此记录下升级步骤

升级准备

1. 删除yarn.lock或者package.lock、node_modules文件
2. 升级vue及其依赖

"postcss": "^8.0.0",
"vue": "^2.7.14",

"@vue/cli-plugin-babel": "^4.5.18",
"@vue/cli-plugin-router": "^4.5.18",
"@vue/cli-plugin-vuex": "^4.5.18",
"@vue/cli-service": "^4.5.18",

3. 使用volar 禁用vetur
4. 因为安装了vue3对应的插件volar之后打开了vue2项目导致报错，需要在jsconfig.json里主动指明当前版本。编辑jsconfig.json文件

{
    "compilerOptions": {
        "target": "ES6",
        "jsx": "react",
        "baseUrl": "./",
        "paths": {
            "components/*": ["src/components/*"],
            "assets/*": ["src/assets/*"],
            "@/*": ["src/*"]
        }
    },
    "exclude": ["node_modules", "dist"],
    "include": ["src/**/*"],
  	// 新增
    "vueCompilerOptions": {
        "target": 2.7
    }
}

vuex与vue-router

vue-router 4.x版本存在一个较大的兼容性问题，即不支持在mixin中的路由钩子函数。考虑到实际项目中有这方面业务需求，所以并没有升级vuex和vue-router到4.x版本，在单文件组件中如果需要引用两者的话有一个替代方案在本地新建一个vueApi.js文件

import { getCurrentInstance } from 'vue';

// 访问vuex
export const useStore = () => {
  const vm = getCurrentInstance();
  if (!vm) throw new Error('must be called in setup');
  return vm.proxy.$store;
};
// 访问router
export const useRouter = () => {
  const vm = getCurrentInstance();
  if (!vm) throw new Error('must be called in setup');
  return vm.proxy.$router;
};
  // 访问route
export const useRoute = () => {
  const vm = getCurrentInstance();
  if (!vm) throw new Error('must be called in setup');
  return vm.proxy.$route;
};

实际开发遇到的问题

1. setup语法糖中无法使用vuex中的辅助函数如mapgetter
2. 不能在setup中直接使用jsx可能使loader解析导致的
3. 代码组织问题以及如何正确地使用组合函数，由于舍弃了选项式data、methods这种结构化开发模式，业务代码都被放在setup函数中代码组织问题就很考验前端攻城狮们的功力了。可以查看官网组合式函数这一篇指南组合式API常见问答

使用组合式API的优势就不再赘述了官网讲的很好，在实际开发中如果遇到难以解决的问题不要钻牛角尖占用过多时间，替换回选项式API就OK了，不管怎样都是为了业务服务。干完活才是最重要的！！！