Cara menggunakan cangkuk dalam vue3

1. Apakah cangkuk

Cangkuk bermaksud cangkuk Apabila anda melihat "cangkuk", adakah anda memikirkan fungsi cangkuk? Malah, hooks adalah benar-benar cara menulis fungsi.

vue3 membangunkan API Komposisi dengan belajar daripada react hooks, jadi ini bermakna API Komposisi juga boleh disesuaikan untuk enkapsulasi hooks.

dalam

vue3hooks ialah cara menulis fungsi, iaitu untuk mengekstrak kod js beberapa fungsi individu fail dan meletakkannya ke dalam fail js yang berasingan, atau beberapa Public kaedah/fungsi yang boleh digunakan semula. Sebenarnya, hooks dan vue2 dalam mixin agak serupa, tetapi berbanding mixins, hooks lebih jelas tentang sumber kod fungsi yang digunakan semula dan lebih jelas serta lebih mudah difahami.

2. Penggunaan cangkuk

1 Cipta folder src dalam hooks untuk menyimpan hook fail

2. Tulis fail cangkuk mengikut keperluan Contohnya, jika anda ingin melaksanakan fungsi yang merekodkan kedudukan semasa tetikus apabila mengklik pada halaman, anda boleh mencipta fail baharu hooks dalam folder 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(&#39;click&#39;, updateMouse)
  })

  onUnmounted(() => {
    document.removeEventListener(&#39;click&#39;, updateMouse)
  })

  return { x, y }
}

export default useMousePosition

Penggunaan fail 3.hook: digunakan dalam komponen yang perlu menggunakan fungsi

, seperti dalam fail test.vue: hook

// src/views/test.vue
<template>
  <div>
    <p>X: {{ x }}</p>
    <p>Y: {{ y }}</p>
  </div>
</template>

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

    return {
      x,
      y
    }
  }
})
</script>

Atas ialah kandungan terperinci Cara menggunakan cangkuk dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!