vue3hook

# hooks

## 特点

- 1.抽离公共功能

- 2.以`use`开头的函数

- 3.导出响应式变量和方法

> 在hooks中可以任意使用 vue3中组合api

## 常用的hook

** useRequest **

- 发送请求  自动/手动

- SWR

- 缓存/预加载

- 屏幕聚焦请求

- 轮询

- 防抖

- 节流

- 依赖请求

- 突变

- loading delay

## useRequest 提供了以下几个生命周期配置项，供你在异步函数的不同阶段做一些处理。

    onBefore：请求之前触发

    onSuccess：请求成功触发

    onError：请求失败触发

    onFinally：请求完成触发

注意：vue3中 hook不能在普通脚本使用，只能在setup或者函数组件中使用。

<template>
  <!-- <div id="app">
    <div class="count">
      <button @click="e => add()">+</button>
      <span>{{ num }}</span>
      <button @click="e => reduce()">-</button>
    </div>
  </div>

  <button @click="()=>setStore()">将状态持久化存储到 localStorage中</button> -->


  <div>
      <p style="marginTop: 16"> Clicked count: {{throttleFnValue}} </p>
      <button type="button" @click="run">
        useThrottleFn测试
      </button>
    </div>

</template>

<script setup>
// import { ref,watch } from 'vue';
// import useCount from './hooks/count.js'

// let { num, add, reduce } = useCount()         


import { ref } from 'vue';
import { useThrottleFn } from './hooks/useThrottleFn/index.js';

    const throttleFnValue = ref(1);
    const { run } = useThrottleFn(()=>{
      throttleFnValue.value++
    },500)


// let count=ref(0)
// const add=()=>{
// count.value =count.value+1
// }
// const reduce=()=>{
//   count.value=count.value-1
// }


let toke=ref('falsaf')

const setStore=()=>{
  localStorage.setItem('token',toke)
}

setInterval(()=>{
  toke.value=toke.value + 'yyds'
},2000)
//当toke 发生变化时，自动更新 localStorage
  
watch(toke,()=>{
  setInterval();
})


</script>

<style   scoped></style>  

/**
 * 训练自己封装 hooks的能力
 * 1.能实现功能（cv）
 * 2.建立思考模式
 *    问自己：这个效果或者功能能不能抽离成一个独立的功能？
 *     把自己的问题抛给别人======>别人会给你一个思路------->怎么把他的思路实现------------>第一个hooks（封装）
 *
 */

main.js  代码

import { createApp } from 'vue'
import App from './App.vue'
import loading from './plugins/loading.js'
// import router from './router'

let app=createApp(App)

app.mount('#app')

//插件第一种：use的实参函数
// app.use(function(vm){
// console.log('use run ',vm);
// })

//插件第二种形式：use实参是一个对象，必须要有install
//app.use 的第二...参数  是给 intall函数传入实参的
// app.use({
//     install(vm){
//         console.log('intall run',vm);
//     }
// },{
//     a:'2312'
// })

// 第三种模块化写法 
//1. 将 app.use的实参一，抽离成单独的模块
//2.在通过导入模块并挂载到app.use上方式，实现模块化
app.use(loading)