vue3如何自定义hook

目录

1 在src文件夹下创建一个hook文件夹

2文件夹下创建以.ts/.js为后缀的文件（主要看有没有配置支持ts和想不想用ts）

3 在其中书写逻辑 这边以封装一个，类似react useState的hook为例

         4在需要的地方进行引入

使用方式可以参考react中的 useState

虽然没有明确规定hook文件，以什么命名，但官方要求的规范是以use开头

---

1 在src文件夹下创建一个hook文件夹

2文件夹下创建以.ts/.js为后缀的文件（主要看有没有配置支持ts和想不想用ts）

3 在其中书写逻辑 这边以封装一个，类似react useState的hook为例

import {ref} from 'vue'
export default(data:any)=>{
    let state=ref(data)
    let setState=(ndata:any)=>{
         state.value=ndata
    }
    return [state,setState]
}

我们知道react中 useState接受一个数组 因此我们返回一个数组  第一个参数是定义的值 接受的数据就是用户输入的数据 由于用户输入类型不确定，因此使用any 

第二个参数是一个函数 可以对其进行修改 同样的问题 值不确定 因此使用any js代码不需要加

4在需要的地方进行引入

import useState from './hooks/useState'

 let [msg,setmsg]=useState('hello world')

使用方式可以参考react中的 useState

虽然没有明确规定hook文件，以什么命名，但官方要求的规范是以use开头