Vue3自定义Hooks写法

       Vue3提供了一套全新的Composition API（组合式 API），可以使用函数式写法来封装组件，和传统的类写法有着比较大的区别，Hooks写法没有了this指针，生命周期函数更名，路由和vuex的写法也全部变成了函数式写法。

      如果一个组件很复杂，我们把所有的逻辑都写在setup()中的话，会造成代码可读性很低，代码混乱，不利于维护。所以我们可以用自定义Hooks写法，也就是抽离式写法，把页面的部分逻辑抽离出来，写在单个文件中，以达到减低代码耦合度，提高复用性的作用。

基础写法：

       例如，我们在一个组件中请求了一份数据赋值给组件中的某个状态，传统写法是写在当前组件中的：

<script>
import { reactive, onMounted } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const obj = reactive({
      dataList: []
    })

    onMounted(() => {
      axios.get({
        url: '你的路径/xxx.json'
      }).then((res) => {
        dataList = res.data
      })
    })

    return {
      obj
    }
  }
}
</script>

但现在我们可以把这段代码给抽离出来放在单独的文件getData.js中，然后在这个组件中引入即可：

在getData.js中书写如下代码：

import { reactive, onMounted } from 'vue'
import axios from 'axios'

function getData() {
  const obj = reactive({
      list: []
  })

  onMounted(() => {
    axios.get({
      url: '你的路径/xxx.json'
    }).then((res) => {
      list = res.data
    })
  })

  return obj
}

export { getData }

在组件中引入：

<script>
import { getData } from '你的路径/getData.js'

export default {
  setup() {
    const obj = getData()

    return {
      obj
    }
  }
}
</script>

自定义Hooks写法实现了相同的效果，将部分逻辑抽离出来，在逻辑非常多的组件中极大的降低了耦合度