Vue3魔法手册 作者 张天禹 11_自定义hooks

删除所有结构和脚本

安装 npm i axios 这个axios必须掌握

接口地址 1,没有跨域问题, 2, 比较稳定

https://dog.ceo/api/breed/pembroke/images/random



https://dog.ceo/api/breed/pembroke/images/random

{
  "message": "https://images.dog.ceo/breeds/pembroke/n02113023_14516.jpg",
  "status": "success"
}

{
  "message": "https://images.dog.ceo/breeds/pembroke/n02113023_660.jpg",
  "status": "success"
}

{
  "message": "https://images.dog.ceo/breeds/pembroke/n02113023_11091.jpg",
  "status": "success"
}

{
  "message": "https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg",
  "status": "success"
}

https://images.dog.ceo/breeds/pembroke/n02113023_5032.jpg
https://images.dog.ceo/breeds/pembroke/n02113023_6869.jpg
https://images.dog.ceo/breeds/pembroke/n02113023_10636.jpg
https://images.dog.ceo/breeds/pembroke/n02113023_4285.jpg
https://images.dog.ceo/breeds/pembroke/n02113023_660.jpg,
https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg,

如何处理异常？

将请求错误的详细信息包装在一个对象里面

拿出一个error提示一下 代码-效果

老师的 代码-效果

数据

方法

跟 vue2 很类似

hook就是解决让一个功能的数据和方法贴在一起，比如下图中求和的数据和方法就合在一起。

再比如狗的数据和方法合在一起，如下图所示

将数据和方法合在一起，其实就是我们所表达的封装,就是模块化开发，你可以理解vue3里面的 hooks,把模块化开发发挥到极致的，有点类似于vue2中的mixin混合开发

hooks->xxx.js或者 xxx.ts,他就是一个js文件，或者是ts文件

hooks 他的命名很讲究，如果你的内容是与狗相关的,最好命名useDog

绿色体现的是你具体的功能

狗相关数据

前端里面模块化的写法

第1种写法: 
export default + 值	

函数得向外提供东西

当有一天你要使用 useDog 的时候，别人看到你只是一个函数,你这个useDog什么也不是，因为你没有向外界提供东西

向外界(部)提供的东西

每一个数据和方法都跟狗相关 src/hooks/useDog.ts

当有人使用 useSum 的时候，他能得到sum(和)以及add(让和相加的方法)

hooks的本质是一个一个可以调用的函数

有关狗的函数

以后写求和代码相关的这个人只要维护好hooks/useSum.ts 就可以了

以后写狗相关代码的这个人只要维护好hooks/useDog.ts 就可以了

等你用的时候你发现在也不用去写数据和方法，数据和方法还是集中管理的

最牛的是 hooks 里面可以写钩子

1, 表示一上来就加1
// 生命周期钩子
onMounted(() => {
    add()
})

2，表示一上来就增加一张狗图片
// 生命周期钩子
onMounted(() => {
    getDog()
})

计算属性 代码-效果

这个绿色的相关的功能点数据,方法,计算属性, 生命周期钩子等等都在绿色函数模块里面

讲完hooks你就明白什么是组合式API,如果没有hooks,组合式也没有意义

_自定义hooks 实现代码如下

1, src/components/Person.vue

<template>
	<div class="person">
		<h2>当前求和为: {{ sum }},放大10倍后: {{ bigSum }}</h2>
		<button @click="add">点我+1</button>	
		<hr>
		<img v-for="(dog,index) in dogList" :key="index" :src="dog" alt="">
		<br>
		<button @click="getDog">再来一只小狗</button>
	</div>
</template>

<script setup lang="ts" name="Person">
	import useDog from '@/hooks/useDog'
	import useSum from '@/hooks/useSum'

	const {sum,add,bigSum} = useSum()
	const {dogList,getDog} = useDog()
</script>


<style scoped>
	.person {
		background-color: skyblue;
		box-shadow: 0 0 10px;
		border-radius: 10px;
		padding: 20px;
	}

	button {
		margin: 0 5px;
	}

	li {
		font-size: 20px;
	}

	img {
		height: 150px;
		margin-right: 10px;
	}
</style>



2, src/hooks/useDog.ts

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

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

    // 方法

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

    // 生命周期钩子
    onMounted(() => {
        getDog()
    })


    // 向外界(部)提供的东西 暴露给模板的数据和方法 可以是数组对象，容器对象，等
    return {
        dogList,
        getDog
    }
}




3, src/hooks/useSum.ts
import { ref,onMounted,computed } from 'vue'

export default function () {
    // 数据
    let sum = ref(0)
    // 计算属性 需求： 在原来sum基础上，放大10倍
    let bigSum = computed(() => {
        return sum.value * 10
    })

    // 方法
    function add() {
        sum.value += 1
    }

    // 生命周期钩子
    onMounted(() => {
        add()
    })

    // 向外部提供数据和方法
    return {
        sum,
        add,
        bigSum
    }
}