作者: 蟹老板爱写代码
https://juejin.cn/post/6946387745208172558
升级Vue3后,让人最脑壳疼的应该是新的Compostion API语法,他的难点不是语法,而是他提供了全新的组织代码的思维方式。
我刚从Vue2转到Vue3时,代码都严格的遵循Compostion API写法,但是发现比Option API写法维护性更差。
踩过的坑
1. 按技术类型划分代码
在日常开发中,前端一般会收到交互稿或设计稿后开始布局,然后编写逻辑代码。在Vue2中,通常做法是响应数据放到data
、逻辑方法放到methods
,这样的做法非常方便,也让我们很容易组织代码。
当使用vue3的Compostion API时,如果还是用Vue2的形式组织代码,这不但不会提升代码质量,反而因为缺乏约束而降低可读性。
我在github随便找了一段代码,你觉得这段代码比Vue2简洁吗?
export default {
setup () {
const state = reactive({
message: '',
msgList: []
})
const router = useRouter()
let username = ''
onMounted(() => {
username = localStorage.getItem('username')
if (!username) {
router.push('/login')
return