快捷導(dǎo)航

vue3的hooks用法總結(jié)

更新時間：2023年04月19日 15:29:05 作者：一只愛吃糖的小羊

vue3中的hooks其實是函數(shù)的寫法，就是將文件的一些單獨功能的js代碼進(jìn)行抽離出來，放到單獨的js文件中，這篇文章主要介紹了一文掌握vue3中hooks的介紹及用法,需要的朋友可以參考下

vue3的hooks總結(jié)

vue3中的hooks其實是函數(shù)的寫法，就是將文件的一些單獨功能的js代碼進(jìn)行抽離出來，放到單獨的js文件中。這樣其實和我們在vue2中學(xué)的mixin比較像。下面我們總結(jié)一下如何去書寫hooks。
首先應(yīng)該先建立一個hooks文件夾：其目的是為了存放hook文件。

在這里插入圖片描述

建立相關(guān)的hook文件：一般使用use開頭。

一、計數(shù)器的hook

在這里插入圖片描述

useTitle的hooks

useScrollPostion用來監(jiān)測瀏覽器頁面的滾動情況

在這里插入圖片描述

useMousemove監(jiān)聽鼠標(biāo)位置的hook

在這里插入圖片描述

useLocalStorage可以本地存儲

在這里插入圖片描述

vue3中hooks的介紹及用法小結(jié)

大家好，今天這篇文章是介紹一下vue3中的hooks以及它的用法。本文內(nèi)容主要有以下兩點：

什么是hooks
vue3中hooks的使用方法

一、什么是hooks

hook是鉤子的意思，看到“鉤子”是不是就想到了鉤子函數(shù)？事實上，hooks 還真是函數(shù)的一種寫法。

vue3 借鑒 react hooks 開發(fā)出了 Composition API ，所以也就意味著 Composition API 也能進(jìn)行自定義封裝 hooks。

vue3 中的 hooks 就是函數(shù)的一種寫法，就是將文件的一些單獨功能的js代碼進(jìn)行抽離出來，放到單獨的js文件中，或者說是一些可以復(fù)用的公共方法/功能。其實 hooks 和 vue2 中的 mixin 有點類似，但是相對 mixins 而言， hooks 更清楚復(fù)用功能代碼的來源, 更清晰易懂。

二、hooks的用法

1.在src中創(chuàng)建一個hooks文件夾，用來存放hook文件

2.根據(jù)需要寫hook文件，比如要實現(xiàn)一個功能就是在點擊頁面時，記錄鼠標(biāo)當(dāng)前的位置，可以在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

3.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的使用，是不是覺得特別的簡單清晰。

到此這篇關(guān)于一文掌握vue3中hooks的介紹及用法的文章就介紹到這了,更多相關(guān)vue3 hooks用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: