vue项目升级vue3中小坑记录

近期在进行项目中vue版本的升级，原项目使用vue-element-admin+ts的版本进行了魔改，遇到的坑比较多，随笔记录一、。

ts语法报错——JSON.parse()值类型错误

项目中由于实现原因，需要将后台返回的菜单进行本地存储（sessionStorage），但本地存储在使用时发现下列报错：

由于JSON.parse()的参数需要的是字符串类型，但通过sessionStorage读取到的值可能是null，与所需参数类型不一致，所以在sessionStorage取值是需要加类型判断（处理）

let sessionMenu = sessionStorage.getItem('xxx') || ''
1

如此再使用JSON.parse()方法是就不会报类型错误。
但事情并没有这么简单！！！

ts语法报错——JSON.parse()语法错误

先看报错信息：

问题原因：
由于存储在sessionStorage中的是菜单数据，内部包含了一些特殊字符： / > \ ，此时直接使用JSON.parse()进行处理就会报错。
处理方法：

// 存储数据时
let sessionMenu = encodeURIComponent(JSON.stringify(data))

// 使用数据时
let temp = sessionStorage.getItem('xxx') || ''
let storageMenu = JSON.parse(decodeURIComponent(temp))

1
2
3
4
5
6
7

如上处理，就可以正常使用JSON.parse()方法了。

关于vue2项目升级vue3项目

由于公司项目比较老旧，前后端不分离开发的，先期对一部分进行了vue2的改造，但是内部实现保留了大量的requirejs+jquery的实现，vue3版本中相关实现需要大规模的改写，考虑到vue2代码要改写vue3语法，相较于一点点的先升级vue3，在一步步改写内部实现，选择了直接重写某一功能模块的方式，当中遇到的问题也比较多。
改变是痛苦的，温水煮青蛙可能会感觉上不那么痛苦，但刮骨疗毒才能获得新生。