Vue3的自定义Hooks

在Vue3中，没有了data和methods，数据和方法不再强制的卸载对应的前者当中。数据和方法可以写在相近位置，以便后续的维护及复用

<template><div>{{ sum }}</div><button @click="addSum">+1</button><div>{{ result }}</div><button @click="reducerel">-1</button>
</template><script setup>import { ref } from 'vue'//自增let sum = ref(0)function addSum() {sum.value += 1}//自减let result = ref(10)function reducerel(){result.value -= 1}
</script>

当一个功能的所牵涉到的数据和方法过多，而且这个页面的类似功能也有很多，那这个页面的代码虽然照上述的方法做了区分，但是维护起来还是挺头疼的。

那么有没有一种方法让一个代码文件都是一个功能牵扯到的所有的数据和方法，主页再进行调用，这样如果后续我要维护相关的功能的话，我就可以直接在这个代码页面进行维护就好了？有的！那就是 Hooks

首先需要在src目录下创建hooks文件，在向其中建立各种的js或ts文件，文件名可以使用use+功能名的形式

->src->hooks->useAdd.ts->useReduce.ts

其后就可以将相关功能的数据及方法写到相关的文件里

比如我拆分开头的代码中的 addSum 的相关功能

useAdd.ts

import { ref,onMounted} from 'vue'export default function (){//数据let sum = ref(0)//方法function addSum(){sum.value += 1}//生命周期onMounted(()=>{sum.value += 1})//向外部提供东西，以至于将封装好的数据方法可以在外部使用return { sum,addSum }
}

拆分之后就是要引入使用

<template><div>{{ sum }}</div><button @click="addSum">+1</button><div>{{ result }}</div><button @click="reducerel">-1</button>
</template><script setup>import { ref } from 'vue'import useAdd from '@/hooks/useAdd' //引入自定义的hooks//自增//let sum = ref(0)//function addSum() {//    sum.value += 1//}const { sum,addSum } = useAdd() //注入  到这关于addSum的整个功能可以正常使用了//自减let result = ref(10)function reducerel(){result.value -= 1}
</script>