vue3 hooks,vue hooks组件

　　本文主要介绍了vue3的自定义钩子/可组合功能模式，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

自定义hooks/可组合函数

　　vue3组合api下mixins的替代方法(自定义钩子/可组合函数)

　　传统上，封装在导入文件中的mixins通过这个调用属性或方法，

　　虽然这在vue3的组合API中没有定义，但事实上，这两者是冲突的，

　　你只能打包一个全新的方法来使用类似mixins的函数。

　　我们把这种全新的方式叫做自定义钩子(注：vue在写这篇文章的时候还没有正式有这个概念，基本都是自己摸索出来的。我们把react的习惯称为定制钩子。现在有了官方定义：可组合函数)。

1.mixins方式的痛点

　　传统的mixin有很多诟病，mixin的深度合并非常隐式，使得代码逻辑更加难以理解和调试，如下：

　　mixins 容易冲突：因为每个特性的属性都合并到同一个组件中，所以组件中同名的属性或方法会覆盖mixins中的属性或方法。可重用性有限：我们不能给mixins传递任何参数来改变它的逻辑，这降低了它们在抽象逻辑上的灵活性。数据来源不清晰：组件中使用的mixins中的数据或方法在当前组件代码中无法搜索到，容易造成错误解释，比如被误删为错误码或冗余代码。

2.传统mixins方式示例

　　myMixins.ts:

　　导出默认值{

　　data () {

　　返回{

　　aa: 1

　　}

　　已安装(){

　　this.testFn()

　　方法：{

　　testFn () {

　　console.log(testFn )

　　}

　　index.vue:

　　模板

　　div{{ aa }}/div

　　/模板

　　脚本语言

　　从“vue”导入{ defineComponent，onMounted }

　　从导入myMixins。/myMixins

　　导出默认定义组件({

　　mixins: [myMixins]，

　　已安装(){

　　console.log(已装载索引)

　　}

　　})

　　/脚本

　　如上图，封装的myMixins实际上只做两件事，一是在挂载的hook函数中执行testFn方法，二是公开一个aa变量供外部使用；在index.vue中引入aa后，在dom中使用。

　　这是mixins的两种最典型的用法。一种是自己执行一些常用逻辑，外部导入的时候没必要管。另一种是定义一些数据变量供外部使用。

3.自定义hooks方式示例

　　1、代码封装

　　代码优先，myHooks.ts:

　　从“vue”导入{ ref，onMounted }

　　导出默认函数(){

　　const aa=ref(1)

　　函数testFn () {

　　console.log(testFn )

　　}

　　onMounted(()={

　　测试Fn()

　　})

　　返回{

　　嗜酒者互诫协会

　　}

　　index.vue:

　　模板

　　div{{ aa }}/div

　　/模板

　　脚本语言

　　从“vue”导入{ defineComponent，onMounted }

　　从导入myHooks。/myHooks

　　导出默认定义组件({

　　setup () {

　　const { aa }=myHooks()

　　onMounted(()={

　　console.log(已装载索引)

　　})

　　返回{

　　嗜酒者互诫协会

　　}

　　})

　　/脚本

　　正如您所看到的，这里没有使用mixins属性来引入逻辑代码，但本质上它只是封装了一个ts文件用于引入。使用后，数据源清晰可见，代码引用也有据可查。

　　2、为什么导出的是function

　　因为作为对象导入意味着导入时执行封装的逻辑，而我们封装的逻辑是composition api包装的特殊代码，只能在setup中正常使用，所以需要导出一个函数，这样才能在组件中使用

　　在setup中调用这个函数来指定执行时间。

　　导出函数的另一个目的是方便参数传递，这样在引用不同的组件时可以做一些差异化的逻辑处理。

　　3、封装建议

　　导出的函数只需要返回组件中引用的数据；对于不需要引用的组件，不需要返回。只有导入的函数可以在组件中调用。

　　组件中的自定义钩子调用代码最好放在安装的第一行，清晰不易遗漏。

　　响应式api使用风格统一。其实这也是整个项目风格统一的问题。对于setup中定义的数据，需要用ref或者reative来响应，这样才能保持统一，这样有些就不会用with了。价值和一些不会。

vue3(hooks)

　　vue3的钩子相当于封装了公共方法的js文件。

　　/* *挂钩计数器方法的文件* */

　　从“vue”导入{ ref }

　　导出默认函数(){

　　常量计数器=ref(0)

　　常数增量=()={

　　计数器值

　　}

　　const devrement=()={

　　计数器.值-

　　}

　　返回{

　　计数器，

　　增量，

　　发展

　　}

　　并且介绍和使用方法如下。

　　模板

　　差异

　　H1我的名字是：{{info.name}}/h1

　　H1我的年龄是：{{info.age}}/h1

　　当前的h1计数为：{{counter}}/h1

　　Button @click=increment 单击以添加一个/button

　　Button @ click= devremedy Click减一/button

　　/div

　　/模板

　　Script //你也可以使用setup语法在这里写sugar。

　　从“vue”导入{ reactive }；

　　//引入钩子文件名作为变量名。

　　从导入useCounter./hooks/use counter . js ；

　　导出默认值{

　　setup(){

　　const info=reactive({name:dxx ，年龄：18})

　　//解构hooks文件中的所有方法和变量以便使用。

　　const { counter，increment，devrement }=useCounter()

　　//最后，导出方法和变量。

　　返回{

　　信息，