不要再用 Vue 2的思维写Vue 3了

作者： 蟹老板爱写代码 

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