vue3的hook,vue-hooks
本文主要介绍在Vue3中使用hook函数实现代码重用的详细说明。Vue3中的Hook函数可以帮助我们提高代码的复用性，这样我们就可以在不同的组件中使用Hook函数。
目录
前言VUE2我们是怎么做到的？我们如何处理VUE3中可重用代码逻辑的封装？说了这么多，不如直接从代码看区别。
前言
在项目的开发过程中，我们会遇到一些情况，就是一些代码逻辑和功能函数可以被多个组件复用，我们想复用。我们能做什么？
VUE2我们是怎么做的呢？
vue2里有一个东西：mixins可以实现这个功能。mixins就是把这些相同的逻辑拉出来，每个组件只需要引入mixins就可以实现代码复用。弊端一：会涉及到被覆盖的问题组件的数据、方法、过滤器，会覆盖到Mixins中同名的数据、方法、过滤器。变量来源不明确，不利。
VUE3中我们怎么处理复用代码逻辑的封装呢？
弊端二：自定义hookVue3的钩子函数相当于vue2的mixin，但是：hook是函数Vue3的钩子函数，可以帮助我们提高代码的复用性，在不同的组件中利用钩子函数。
说那么多，不如直接上代码来看差异
Vue3中我们可以：
模板
img alt=Vue logo src=。/assets/logo.png /
差异
VUE3中的挂钩
/div
Button @click=setNumber 点击此按钮调用setNumber函数，号码将为1: {{mynumber}}/button
Button @click=a 单击此按钮，号码将为1: {{a}}/button
Button @ click= b-单击此按钮，号码将为-1: {{b}}/button
/模板
脚本
从“vue”导入{ reactive，ref，computed，watch，watch effect }；
导出默认值{
setup(){
const myNumber=ref(0)
const a=ref(0)
const b=ref(0)
常量集合编号=()={
my number . value=my number . value 1；
}
手表([a，b]，([newA，newB]，[oldA，oldB])={
console.log(newA，oldA:)
console.log(newA，oldA)
console.log(newA，oldB:)
console.log(newA，oldB)
})
返回{
我的号码，
一，
b，
setNumber
}
}
}
/脚本
风格
#app {
字体系列：Avenir，Helvetica，Arial，无衬线；
-webkit-font-smoothing:抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}
按钮{
显示：块；
边距：0自动；
}
/风格
先来一段我们的一把梭代码，代码没有复用，全都放到当前组件
以上是原写。如果其中有几个我们需要重用的变量呢？例如，这些变量和函数需要在其他函数中使用。我们做什么呢？我们试试hook方法~ ~我们新建一个文件，src \ common-hooks \ number change . js把上面的代码剪成src \ common-hooks \ number change . js，然后用这个来覆盖：export const use number=()={ } import { ref，watch} from vue。
导出常量useNumber=()={
const myNumber=ref(0)
const a=ref(0)
const b=ref(0)
常量集合编号=()={
my number . value=my number . value 1；
}
手表([a，b]，([newA，newB]，[oldA，oldB])={
console.log(newA，oldA:)
console.log(newA，oldA)
console.log(newA，oldB:)
console.log(newA，oldB)
})
返回{
我的号码，
一，
b，
setNumber
}
}
执行代码看一下：
脚本
从导入{ useNumber }。/common-hooks/number change ；
导出默认值{
setup() {
const { myNumber，a，b，set number }=use number()；
返回{ myNumber，a，b，set number }；
},
};
/脚本
关于Vue3使用hooks函数进行代码重用的详细说明，本文到此结束。有关Vue3hooks函数的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。