前言
最近在写低代码，写了三千来行代码了突然发现还是用的vue2的写法（其实项目搭建之初就是用的vue3，奈何vue2用习惯了），现在vue3已经大行其道，故考虑进行下重构。之前已经写过一篇vue3.0尝鲜文章，但是不具有针对性，故在此单独记录
目标
对如下页面进行重构，找到每一种vue2写法对应的vue3中的API
主页面
顶栏
改造
在script标签上增加setup属性
增加该属性后，引入的组件就不需要在手动注册了，但是此时编辑器内可能相关组件会置灰状态标识未使用，强迫症表示很难受，故找到设置，搜索vetur，关闭如下选项
提取data
使用reactive创建响应式数据
创建后在模板中使用时，不能再直接写了，需要以state开头
methods直接定义在script中即可
created与mounted
setup属性的script标签相当于在普通标签下的setup函数，故直接书写；mounted则直接替换成onMounted即可
provide
如果需要传递多个，则多次调用即可
watch
和provide一样，可以书写多个watch监听不同的值；对于reactive创建的值第一个参数必须为函数并返回监听目标
vuex的消息派发
name
setup默认没有提供name属性，可以在普通的script标签中导出，或者借用第三方插件
props
同样也是对象或数组两种形式
emit
在模板中，写法是不变的，但是是setup的script中需要先进行声明
computed
（使用vuex提供的mapState也可以读取到，但是无法被watch监听）
自定义hook
对于公共逻辑可以定义hook来实现（在hook中可以通过getCurrentInstance函数获取所在组件实例上的props、data等，虽然vue并不推荐，退而求其次的，通过传参也是可以的）
网友评论