【Vue3从零开始-实战】S11：setup函数的职责及封装setup函数中的逻辑

前言

实战已经开始了！上一篇文章中我们把Toast组件拆分出来了，并且把其中的逻辑部分也从Login组件中的setup函数中拆分到其组件中去。

其实一个setup函数主要是做什么呢？它的职责又是干啥呢？和vue2中的methods方法有什么区别呢？

在setup函数中，可以用物以类聚人以群分来形容我们的代码逻辑，也就是关于某一块的东西可以放在一起去管理。然而我们在Login.vue页面里面写的代码还不算完全物以类聚了，有些地方还是比较分散的。所以下面我们就需要去把setup函数中的逻辑都分门别类的拆分出来。

拆分Login逻辑

👉 在拆分之前，我们要明确一点，哪些属于Login的逻辑模块。

👉 我们在Login组件页面会发现，有两个input输入框需要进行双向数据绑定，还需要请求mock接口进行登录，最后将错误提示通过Toast组件显示出来。

👉 按照这个逻辑，我们就先将数据绑定的提取出来。

👉 为了更好的绑定数据，我们需要使用以前学过的toRefs方法去解构data里面的值，所以要先引用toRefs

import { reactive, toRefs } from 'vue' 

👉 拆分Login逻辑部分还需要将它剥离出setup函数，所以需要在js中新建一个函数来封装Login的逻辑部分。

const useLoginEffect = (showToast) => {
    const router = useRouter()
    const data = reactive({ mob