自定义函数hooks

• 将相关的 feature 组合在一起
• 非常易于重用

• 界面的需求 - 转化为数据的描述

  优点

• 以函数的形式调用，清楚的了解参数和返回的类型，更好的提示

• 避免命名冲突
• 代码逻辑脱离组件存在 ```typescript

```typescript
// useURLLoader.js
import { reactive } from 'vue'; // 响应式对象
import axios from 'axios';
interface  DataProps<T> {
  result: T | null,
  loading: boolean,
  loaded: boolean,
  error: any
}
const useURLLoader = <T = any>(url: string) => {
  const data = reactive<DataProps<T>>({
    result: null,
    loading: true,
    loaded: false,
    error: null
  })
  axios.get(url).then(resp => {
    data.result = resp.data;
    data.loaded = true;
  }).catch(e => {
    data.error = e;
  }).finally(() => {
    data.loaded = false;
  });
  return data;
};

export default useURLLoader;

对比 React 的自定义 hooks

• 更新数据的方式
• 触发的时机
  • 为什么要包裹在 useEffect 中？
  • 删除了会有什么问题？
  • 为什么 Vue3 不需要这样做也可以？