vue3必学技能--自定义Hooks让vue3更加畅快

最新推荐文章于 2024-03-02 17:26:16 发布

随风小薇

最新推荐文章于 2024-03-02 17:26:16 发布

阅读量6.2k

点赞数 4

分类专栏： vue 文章标签：前端 vue.js javascript

原文链接：https://juejin.cn/post/7083401842733875208#heading-7

版权

vue 专栏收录该内容

34 篇文章 10 订阅 ¥299.90 ¥99.00

订阅专栏

vue3必学技能–自定义Hooks让vue3更加畅快

Hooks在前端领域并没有明确定义，借用知乎大佬的定义：在JS里是callback,事件驱动，集成定义一些可复用的方法。

Vue3官方文档并没有对自定义Hooks做任何定义，却无处不在在使用这个技巧，很多开源项目也在用这个技巧，所以作为一个合格的Vuer学会自定义Hooks让Composition Api写起来更丰满是十分必要的！(飞机-官方文档在偷偷使用自定义Hooks)

Vue3自定义Hooks定义：

个人理解：一些可复用的方法像钩子一样挂着，可以随时被引入和调用以实现可复用的方法高内聚低耦合的目标，应该都能算是hook；

为什么Vue3要用自定义Hook？：

结论：就是为了让Compoosition Api更好用更丰满，让写Vue3更畅快！像写诗一样写代码！
其实这个问题更深意义是为什么Vue3比Vue2更好！无外呼性能大幅度提升，其实编码体验也是Vue3的优点Composition Api的引入（解决Option Api在代码量大的情况下的强耦合） 让开发者有更好的开发体验。但是这些所谓的提高开发体验都是需要开发者不断学习养成编码好习惯

写Vue3请摆脱Vue2无脑this的思想：

写Vue2中很多同学养成了 Option Api无脑this的习惯，来到Vue3的Composition Api还是习惯性想用this，更有人为了写this不惜引入getCurrentInstance!这大可不必！

Composition Api的优点之一就是摆脱无脑this导致的强耦合，功能之间互相this，变量和方法在各个方法混杂，无处不在的this是强耦合的，虽然方便，但是碎片化的option api 后期维护是麻烦的

我相信写Vue2的同学，一定深有感触，一个组件下定义大量变和大量方法，方法嵌套方法，方法之间互相共享变量，维护这样的代码，看似容易理解的Option Api写法，我们需要在methos、data、template之间来回切，Option Api这种写法，代码量和功能小巧时是十分简单明了的，但是代码量一多，功能一复杂，我相信review代码的时候头都痛。

相对的Composition Api在功能复杂、代码量巨大的组件下，我们配合自定义Hooks，将代码通过功能分块写，响应变量和方法在一起定义和调用，这样后期我们改功能A只需要关注功能A块下的代码，不会像Vue2在Option Api需要同时关注methos和data。。。。。

大胆定义一下Vue3的自定义Hook：

虽然官方没有明确指明或定义什么是自定义Hooks，但是却无处不在用；

以函数形式抽离一些可复用的方法像钩子一样挂着，随时可以引入和调用，实现高内聚低耦合的目标；

1/将可复用功能抽离为外部JS文件

2/函数名/文件名以use开头，形如：useXX

3/引用时将响应式变量或者方法显式解构暴露出来如：const {nameRef，Fn} = useXX()

（在setup函数解构出自定义hooks的变量和方法）

来一个简单的自定义Hook：

1、addHook.js

import {ref,watch} from "vue"
const useAdd = ({num1,num2})=>{
  const addNum = ref(0);
  watch([num1,num2],(num1,num2)=>{
    addFunc(num1,num2)
  })
  const addFunc = (num1,num2)=>{
    addNum.value = num1+num2
  }
  return {
    addNum,
    addFunc
  }
}
export default useAdd

2、cutHook.js

import {ref,watch} from "vue"
export function useCut({num1,num2}){
   const cutNum = ref(0);
   watch([num1,num2],(num1,num2)=>{
    cutFunc(num1,num2)
  })
  const cutFunc = (num1,num2)=>{
    cutNum.value = num1+num2
  }
  return {
    cutNum,
    cutFunc
  }
}

使用hooks

<template>
    <div>
        num1:<input v-model.number="num1" style="width:100px" />
        <br />
        num2:<input v-model.number="num2" style="width:100px" />
    </div>
    <span>加法等于:{{ addNum }}</span>
    <br />
    <span>减法等于:{{ cutNum }}</span>
</template>
import { ref } from 'vue'
import useAdd from './addHook.js'     //引入自动hook 
import { useCut } from './cutHook.js' //引入自动hook 
const num1 = ref(2)
const num2 = ref(1)
//加法功能-自定义Hook（将响应式变量或者方法形式暴露出来）
const { addNum, addFunc } = useAdd({ num1, num2 })
addFn(num1.value, num2.value)
//减法功能-自定义Hook (将响应式变量或者方法形式暴露出来)
const { cutNum, cutFunc } = useCut({ num1, num2 })
subFn(num1.value, num2.value)