我居然不知道Vue3可以使用hooks函数实现代码复用？

每天都要开心(^▽)哇：

项目开发过程中，我们会遇到一些情况，就是多个组件都可以重复使用的一部分代码逻辑，功能函数，我们想要复用，这可怎么办呢？

VUE2我们是怎么做的呢？

在vue2 中有一个东西：Mixins 可以实现这个功能
mixins就是将这些多个相同的逻辑抽离出来，各个组件只需要引入mixins，就能实现代码复用
弊端一：会涉及到覆盖的问题
组件的data、methods、filters会覆盖mixins里的同名data、methods、filters
弊端二：隐式传入，变量来源不明确，不利于阅读，使代码变得难以维护

VUE3中我们怎么处理复用代码逻辑的封装呢？

Vue3中我们可以：自定义Hook
Vue3 的 hook函数相当于 vue2 的 mixin, 但是： hooks 是函数
Vue3 的 hook函数可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数

说那么多，不如直接上代码来看差异

先来一段我们的一把梭代码，代码没有复用，全都放到当前组件

<template><img alt="Vue logo" src="./assets/logo.png" /><div>VUE3中的HOOKS</div><button @click="setNumber">点击此按钮，调用setNumber函数，数字会+1：{{myNumber}}</button><button @click="a++">点击此按钮，数字会+1：{{a}}</button><button @click="b--">点击此按钮，数字会-1：{{b}}</button>
</template>
<script>
import { reactive,ref,computed,watch,watchEffect } from "vue";
export default {setup(){const  myNumber = ref(0)const  a = ref(0)const  b = ref(0)const setNumber = ()=>{myNumber.value = myNumber.value+1;}watch([a,b],([newA,newB],[oldA,oldB])=>{console.log('newA,oldA:')console.log(newA,oldA)console.log('newA,oldB:')console.log(newA,oldB)})return{myNumber,a,b,setNumber}}
}
</script>
<style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}
button{display: block;margin: 0 auto;}
</style>

执行代码看一下下哇~~
上面是原始的写法，如果这里面好几个变量我们需要复用怎么办呢？比如说这几个变量，函数，我们需要在其他函数里也用到，我们要怎么办呢？？
下面我们就开始采用hook的方法试一把~~
我们创建一个新的文件，src\common-hooks\numberChange.js
把上面的代码，剪切到src\common-hooks\numberChange.js，然后用这个套起来：export const useNumber =() =>{}

import { ref,watch } from "vue";
export const useNumber =() =>{const  myNumber = ref(0)const  a = ref(0)const  b = ref(0)const setNumber = ()=>{myNumber.value = myNumber.value+1;}watch([a,b],([newA,newB],[oldA,oldB])=>{console.log('newA,oldA:')console.log(newA,oldA)console.log('newA,oldB:')console.log(newA,oldB)})return{myNumber,a,b,setNumber}
}

改写一下我们的模板代码里的script

<script>
import { useNumber } from "./common-hooks/numberChange";
export default {setup() {const { myNumber, a, b, setNumber } = useNumber();return { myNumber, a, b, setNumber };},
};
</script>

哇哦，(^▽)，是不是有点开心，代码看起来是不是感觉，神清气爽了？？？
然后测试一下我们的代码吧~~~
不放图了哦，依然正常运行的哇~~
今天就写到这里啦~小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~
大家要天天(^▽)哦

欢迎大家指出文章需要改正之处~
学无止境，合作共赢

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

我居然不知道Vue3可以使用hooks函数实现代码复用？相关推荐

python函数是一段具有特定功能的语句组_Python学习笔记(五)函数和代码复用
本文将为您描述Python学习笔记(五)函数和代码复用,具体完成步骤: 函数能提高应用的模块性,和代码的重复利用率.在很多高级语言中,都可以使用函数实现多种功能.在之前的学习中,相信你已经知道Pyth ...
第 5 章函数和代码复用
整理的文章内容主要来源为高教版<计算机等级考试二级 Python>教程视频讲义,并且更正了原讲义中的错误的地方. 专栏文章索引如下: 考试大纲第 1 章程序设计基本方法第 2 章 P ...
测验5: 函数和代码复用 (第5周)
测验5: 函数和代码复用 (第5周) 文章目录测验5: 函数和代码复用 (第5周) 单选题程序题这是python123官网上联合MOOC的Python程序设计(第10期)答案单选题第三题补充 ...
python中组合数据类型、函数和代码复用的难点_Python电子教案5-2 函数和代码复用...
<Python电子教案5-2 函数和代码复用>由会员分享,可在线阅读,更多相关<Python电子教案5-2 函数和代码复用(56页珍藏版)>请在人人文库网上搜索. 1.七段数码 ...
Python基础（三）_函数和代码复用
三:函数和代码复用 (一)函数的基本使用 1.函数的定义函数是一段具有特定功能的.可重用的语句组,用函数名来表示并通过函数名进行功能调用.函数也可以看作是一段具有名字的子程序,可以在需要的地方调用执 ...
第五章函数和代码复用
第五章函数和代码复用 5.1 函数的基本使用 5.1.1 函数的定义定义:函数是一段具有特定功能的.可重用的语句组,用函数名来表示并通过函数名进行功能调用. 使用函数的目的:降低编程难度和代码重用 ...
函数和代码复用之实例解析：软文的诗词风
@TOC函数和代码复用之实例解析:软文的诗词风人生苦短,我学Python 朋友圈已经是现代人生活中的一种社交形态,朋友圈里面的各种软文也体现了语言风格的变化.为了便于手机阅读,很多软文常常会使用一种 ...
python函数代码的复用_Python__函数和代码复用
主要内容函数的定义和使用实例:七段数码管的绘制代码复用与函数递归 PyInstall库的使用实例:科赫雪花小包裹函数的定义与使用函数的理解与定义函数的使用及调用过程函数的参数传递函数 ...
python使用del保留字定义一个函数-函数和代码复用 --Python
1.关于递归函数的描述,以下选项中正确的是 A.包含一个循环结构 B.函数比较复杂 C.函数内部包含对本函数的再次调用 D.函数名称作为返回值答案:D 答案解析:递归函数是指函数内部包含对本函数的再 ...

我居然不知道Vue3可以使用hooks函数实现代码复用？

每天都要开心(^▽)哇：

项目开发过程中，我们会遇到一些情况，就是多个组件都可以重复使用的一部分代码逻辑，功能函数，我们想要复用，这可怎么办呢？

VUE2我们是怎么做的呢？

VUE3中我们怎么处理复用代码逻辑的封装呢？

说那么多，不如直接上代码来看差异

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

我居然不知道Vue3可以使用hooks函数实现代码复用？相关推荐

最新文章

热门文章

我居然不知道Vue3可以使用hooks函数实现代码复用？

每天都要开心(▽)哇：

项目开发过程中，我们会遇到一些情况，就是多个组件都可以重复使用的一部分代码逻辑，功能函数，我们想要复用，这可怎么办呢？

VUE2我们是怎么做的呢？

VUE3中我们怎么处理复用代码逻辑的封装呢？

说那么多，不如直接上代码来看差异

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

我居然不知道Vue3可以使用hooks函数实现代码复用？相关推荐

最新文章

热门文章

每天都要开心(^▽)哇：