Vue 中 Hooks 实现功能复用的方法

Hooks 是 Vue 3.0 中引入的一种功能强大的机制，允许我们在不修改组件定义的情况下重用逻辑。它为功能复用提供了简洁且灵活的方法。

使用自定义 Hook

自定义 Hook 是一种创建可重用功能的常见方法。它们是普通 JavaScript 函数，以 前缀开头。

<code class="javascript">import { ref, watch } from '<a style="color:#f60; text-decoration:underline;" href="/zt/15721.html" target="_blank">vue</a>'

export const useCounter = () =&gt; {
  const count = ref(0)

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

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

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

<code class="javascript"><template><div>
    <button>+</button>
    <button>-</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，它提供了一组函数，用于创建和组合反应式值和函数。这允许我们轻松地创建可重用的功能。

例如，以下代码创建了一个 Hook，用于管理表单输入：

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

export const useInput = (initialValue) =&gt; {
  const value = ref(initialValue)

  const updateValue = (newValue) =&gt; {
    value.value = newValue
  }

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

在组件中，可以使用它来创建可重用的输入字段：

<code class="javascript"><template><input v-model="input.value"></template><script>
import { useInput } from './useInput'

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

通过自定义 Hook 和组合式 API，我们可以轻松地在 Vue 中实现功能复用，从而使我们的代码更具模块化、可维护性和可重用性。