Vue3的hooks实战演练

1.没使用钩子前：

各种数据和方法都交织一起，组件易维护，代码复用性差，可读性差

2.hooks实战演练

完成页面：

钩子1：获取狗的照片

import { reactive } from 'vue';
import axios from 'axios'

export default function () {
    let dogList = reactive([
        'https://images.dog.ceo/breeds/pembroke/n02113023_1307.jpg'
    ])


    async function getDogPhoto() {
        try {
            let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
            console.log(result.data)
            dogList.push(result.data.message)
        } catch (error) {
            alert(error)
        }
    }

    return { dogList, getDogPhoto }
}

 钩子2：求和

import { ref } from 'vue';

export default function () {
    let sum = ref(12000)

    function getSum() {
        sum.value += 168
    }
    return { sum, getSum }
}