vue3中hooks的介绍及用法

Posted 一只爱吃糖的小羊

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue3中hooks的介绍及用法相关的知识，希望对你有一定的参考价值。

大家好，今天这篇文章是介绍一下vue3中的hooks以及它的用法。本文内容主要有以下两点：

  1. 什么是hooks
  2. vue3中hooks的使用方法

一、 什么是hooks

hook是钩子的意思，看到“钩子”是不是就想到了钩子函数？事实上，hooks 还真是函数的一种写法。

vue3 借鉴 react hooks 开发出了 Composition API ，所以也就意味着 Composition API 也能进行自定义封装 hooks。

vue3 中的 hooks 就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，或者说是一些可以复用的公共方法/功能。其实 hooks 和 vue2 中的 mixin 有点类似，但是相对 mixins 而言， hooks 更清楚复用功能代码的来源, 更清晰易懂。

二、hooks的用法

  1. 在src中创建一个hooks文件夹，用来存放hook文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XXqAjsI3-1664532965382)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2714bea7b54b461dab887fdc5e68693b~tplv-k3u1fbpfcp-watermark.image?)]

  1. 根据需要写hook文件，比如要实现一个功能就是在 点击页面时，记录鼠标当前的位置，可以在hooks文件夹中新建一个文件useMousePosition.ts，
// src/hooks/useMousePosition.ts
import  ref, onMounted, onUnmounted, Ref  from 'vue'

interface MousePosition 
  x: Ref<number>,
  y: Ref<number>

function useMousePosition(): MousePosition 
  const x = ref(0)
  const y = ref(0)

  const updateMouse = (e: MouseEvent) => 
    x.value = e.pageX
    y.value = e.pageY
  

  onMounted(() => 
    document.addEventListener('click', updateMouse)
  )

  onUnmounted(() => 
    document.removeEventListener('click', updateMouse)
  )

  return  x, y 


export default useMousePosition
  1. hook文件的使用：在需要用到该hook功能的组件中的使用，比如在 test.vue文件中：
// src/views/test.vue
<template>
  <div>
    <p>X:  x </p>
    <p>Y:  y </p>
  </div>
</template>

<script lang="ts">
import  defineComponent from 'vue'
// 引入hooks
import useMousePosition from '../../hooks/useMousePosition'
export default defineComponent(
  setup () 
    // 使用hooks功能
    const  x, y  = useMousePosition()

    return 
      x,
      y
    
  
)
</script>

以上就是vue3中hooks的使用，是不是觉得特别的简单清晰。

这篇文章算是初学者的一个记录，希望对您有所帮助，也请感兴趣的大佬不吝赐教！

React Hooks 介绍及与传统 class 组件的生命周期函数对比

React Hooks 介绍 及与传统 class 组件的生命周期函数对比

为什么要使用 Hooks

在 React 16.8 之前，函数组件也称为无状态组件，因为函数组件也不能访问 react 生命周期，也没有自己的状态。react 自 16.8 开始，引入了 Hooks 概念，使得函数组件中也可以拥有自己的状态，并且可以模拟对应的生命周期。

我们应该在什么时候使用 Hooks 呢？

官方并不建议我们把原有的 class 组件，大规模重构成 Hooks，而是有一个渐进过程:
首先，原有的函数组件如果需要自己的状态或者需要访问生命周期函数，那么用 Hooks 是再好不过了；
另外就是，我们可以先在一些逻辑较简单的组件上尝试 Hooks ，在使用起来相对较熟悉，且组内人员比较能接受的前提下，再扩大 Hooks 的使用范围。

那么相对于传统class， Hooks 有哪些优势?

（1）State Hook 使得组件内的状态的设置和更新相对独立，这样便于对这些状态单独测试并复用。

（2）Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分，这样使得各个逻辑相对独立和清晰。

class 生命周期在 Hooks 中的实现

Hooks 组件更接近于实现状态同步，而不是响应生命周期事件。但是，由于我们先熟悉的 class 的生命周期，在写代码时，难免会受此影响，那么 Hooks 中如何模拟 class 的中的生命周期呢：

总结：

class 组件Hooks 组件
constructoruseState
getDerivedStateFromPropsuseEffect 手动对比 props， 配合 useState 里面 update 函数
shouldComponentUpdateReact.memo
render函数本身
componentDidMountuseEffect 第二个参数为[]
componentDidUpdateuseEffect 配合useRef
componentWillUnmountuseEffect 里面返回的函数
componentDidCatch无
getDerivedStateFromError无

代码实现

import React,  useState, useEffect, useRef, memo  from 'react';

// 使用 React.memo 实现类似 shouldComponentUpdate 的优化， React.memo 只对 props 进行浅比较
const UseEffectExample = memo((props) => 
    console.log("===== UseStateExample render=======");
    // 声明一个叫 “count” 的 state 变量。
    const [count, setCount] = useState(0);
    const [count2, setCount2] = useState(0);
    const [fatherCount, setFatherCount] = useState(props.fatherCount)

    console.log(props);

    // 模拟 getDerivedStateFromProps
    useEffect(() => 
        // props.fatherCount 有更新，才执行对应的修改，没有更新执行另外的逻辑
        if(props.fatherCount == fatherCount )
            console.log("======= 模拟 getDerivedStateFromProps=======");
            console.log(props.fatherCount, fatherCount);
        else
            setFatherCount(props.fatherCount);
            console.log(props.fatherCount, fatherCount);
        
    )

    // 模拟DidMount
    useEffect(() => 
        console.log("=======只渲染一次(相当于DidMount)=======");
        console.log(count);
    , [])

    // 模拟DidUpdate
    const mounted = useRef();
    useEffect(() => 
        console.log(mounted);
        if (!mounted.current) 
            mounted.current = true;
           else 
            console.log("======count 改变时才执行(相当于DidUpdate)=========");
            console.log(count);
          
    , [count])

    // 模拟 Didmount和DidUpdate 、 unmount
    useEffect(() => 
    	// 在 componentDidMount，以及 count 更改时 componentDidUpdate 执行的内容
        console.log("======初始化、或者 count 改变时才执行(相当于Didmount和DidUpdate)=========");
        console.log(count);
        return () => 
        	
            console.log("====unmount=======");
            console.log(count);
        
    , [count])

    return (
        <div>
            <p>You clicked count times</p>
            <button onClick=() => setCount(count + 1)>
                Click me
            </button>

            <button onClick=() => setCount2(count2 + 1)>
                Click me2
            </button>
        </div>
    );
);

export default UseEffectExample;

注意事项

  • useState 只在初始化时执行一次，后面不再执行；

  • useEffect 相当于是 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合，可以通过传参及其他逻辑，分别模拟这三个生命周期函数；

  • useEffect 第二个参数是一个数组，如果数组为空时，则只执行一次（相当于componentDidMount）；如果数组中有值时，则该值更新时，useEffect 中的函数才会执行；如果没有第二个参数，则每次render时，useEffect 中的函数都会执行；

  • React 保证了每次运行 effect 的同时，DOM 都已经更新完毕，也就是说 effect 中的获取的 state 是最新的，但是需要注意的是，effect 中返回的函数（其清除函数）中，获取到的 state 是更新前的。

  • 传递给 useEffect 的函数在每次渲染中都会有所不同，这是刻意为之的。事实上这正是我们可以在 effect 中获取最新的 count 的值，而不用担心其过期的原因。每次我们重新渲染，都会生成新的 effect，替换掉之前的。某种意义上讲，effect 更像是渲染结果的一部分 —— 每个 effect “属于”一次特定的渲染。

  • effect 的清除阶段（返回函数）在每次重新渲染时都会执行，而不是只在卸载组件的时候执行一次。它会在调用一个新的 effect 之前对前一个 effect 进行清理，从而避免了我们手动去处理一些逻辑 。为了说明这一点，下面按时间列出一个可能会产生的订阅和取消订阅操作调用序列：

    function FriendStatus(props) 
// ...
useEffect(() => 
    // ...
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => 
    ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    ;
);


// Mount with  friend:  id: 100   props
ChatAPI.subscribeToFriendStatus(100, handleStatusChange);     // 运行第一个 effect

// Update with  friend:  id: 200   props
ChatAPI.unsubscribeFromFriendStatus(100, handleStatusChange); // 清除上一个 effect
ChatAPI.subscribeToFriendStatus(200, handleStatusChange);     // 运行下一个 effect

// Update with  friend:  id: 300   props
ChatAPI.unsubscribeFromFriendStatus(200, handleStatusChange); // 清除上一个 effect
ChatAPI.subscribeToFriendStatus(300, handleStatusChange);     // 运行下一个 effect

// Unmount
ChatAPI.unsubscribeFromFriendStatus(300, handleStatusChange); // 清除最后一个 effect

参考：
（1）Hooks 与 React 生命周期的关系
（2）使用 Effect Hook

以上是关于vue3中hooks的介绍及用法的主要内容，如果未能解决你的问题，请参考以下文章

vue3官网介绍，安装，创建一个vue实例

vue高级用法

Vue.js中ref ($refs)用法举例总结及应注意的坑

WordPress中函数钩子hook的作用及基本用法

如何开发一款基于 Vite+Vue3 的在线Excel表格系统（上）

如何开发一款基于 Vite+Vue3 的在线Excel表格系统（上）