Cara melaksanakan penggunaan semula berfungsi dengan cangkuk dalam vue

Terdapat dua cara untuk melaksanakan penggunaan semula fungsi dalam Vue: Custom Hook: 1. Buat fungsi JavaScript bermula dengan penggunaan 2. Import dan panggil Hook dalam komponen. API Komposisi: 1. Gunakan ref untuk mencipta nilai reaktif; 2. Gunakan fungsi untuk menggabungkan nilai dan fungsi reaktif 3. Import dan gunakan API komposisi dalam komponen.

Cara Hooks dalam Vue melaksanakan fungsi guna semula

Hooks ialah mekanisme berkuasa yang diperkenalkan dalam Vue 3.0 yang membolehkan kami menggunakan semula logik tanpa mengubah takrifan komponen. Ia menyediakan kaedah ringkas dan fleksibel untuk kegunaan semula berfungsi.

Menggunakan Cangkuk Tersuai

Cangkuk Tersuai ialah cara biasa untuk mencipta fungsi boleh guna semula. Ia adalah fungsi JavaScript biasa, bermula dengan awalan use. use 前缀开头。

<code class="javascript">import { ref, watch } from 'vue'

export const useCounter = () => {
  const count = ref(0)

  watch(count, (newValue) => {
    console.log(`Count changed to: ${newValue}`)
  })

  return {
    count,
    increment: () => count.value++,
    decrement: () => count.value--,
  }
}</code>

然后，可以在任何组件中使用此自定义 Hook：

<code class="javascript"><template>
  <div>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment, decrement } = useCounter()
    return { count, increment, decrement }
  },
}
</script></code>

利用组合式 API

Vue 3.0 引入了组合式 API，它提供了一组函数，用于创建和组合反应式值和函数。这允许我们轻松地创建可重用的功能。

例如，以下代码创建了一个 useInput

<code class="javascript">import { ref } from 'vue'

export const useInput = (initialValue) => {
  const value = ref(initialValue)

  const updateValue = (newValue) => {
    value.value = newValue
  }

  return {
    value,
    updateValue,
  }
}</code>

Cangkuk tersuai ini kemudiannya boleh digunakan dalam mana-mana komponen:

<code class="javascript"><template>
  <input v-model="input.value" @input="input.updateValue" />
</template>

<script>
import { useInput } from './useInput'

export default {
  setup() {
    const input = useInput('')
    return { input }
  },
}
</script></code>

Memanfaatkan API Komposisi

Vue 3.0 memperkenalkan API Komposisi, yang menyediakan satu set fungsi untuk mencipta dan menggabungkan nilai dan fungsi reaktif. Ini membolehkan kami mencipta fungsi boleh guna semula dengan mudah.

Sebagai contoh, kod berikut mencipta cangkuk useInput untuk mengurus input borang: 🎜rrreee🎜Dalam komponen, anda boleh menggunakan ini untuk mencipta medan input boleh guna semula: 🎜rrreee🎜🎜Kesimpulan🎜🎜 🎜Melalui Cangkuk tersuai dan gabungan API, kami boleh melaksanakan penggunaan semula fungsi dengan mudah dalam Vue, menjadikan kod kami lebih modular, boleh diselenggara dan boleh digunakan semula. 🎜

Atas ialah kandungan terperinci Cara melaksanakan penggunaan semula berfungsi dengan cangkuk dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!