7.2 如何定义和使用组合式函数

18_composition/91_composition_mouse_hooks.html

鼠标的位置：({{x}}, {{y}})

如你所见，核心逻辑完全一致，我们做的只是把它移到一个外部函数中去，并返回需要暴露的状态。和在组件中一样，你也可以在组合式函数中使用所有的组合式 API。现在，useMouse() 的功能可以在任何组件中轻易复用了。

更酷的是，你还可以嵌套多个组合式函数：一个组合式函数可以调用一个或多个其他的组合式函数。

18_composition/92_composition_mouse_more_hooks.html

鼠标的位置：({{x}}, {{y}})

7.3 异步状态

在做异步数据请求时，我们常常需要处理不同的状态：加载中、加载成功和加载失败。

18_composition/93_composition_async.html

{{ error }}
{{ item.proname }}
加载中....

如果在每个需要获取数据的组件中都要重复这种模式，那就太繁琐了。让我们把它抽取成一个组合式函数：

18_composition/94_composition_async_hooks.html

{{ error }}
{{ item.proname }}
加载中....

useFetch() 接收一个静态的 URL 字符串作为输入，所以它只执行一次请求，然后就完成了。但如果我们想让它在每次 URL 变化时都重新请求呢？那我们可以让它同时允许接收 ref 作为参数：

95_composition_async_hooks_urls.html - 思考题