Vue3 Hooks 的基础用法

前言

Vue 3 在 API 设计上引入了类似于 React Hooks 的 Composition API，可以更方便地实现逻辑的复用和组合。本文将介绍 Vue 3 Hooks 的基础用法。

基本使用

Vue 3 Hooks 中最简单的 Hook 就是 setup。它是一个在组件创建时执行的函数，可以访问组件实例中的属性和方法，同时可以返回一个包含响应式数据、计算属性、事件处理函数等的对象。

export default {
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment,
    }
  },
}

这个例子中，我们使用了 ref 来定义一个响应式变量 count，然后定义了一个增加 count 值的方法 increment。最后在 setup 函数中返回了一个包含 count 和 increment 的对象。

在模板中，我们可以直接使用 count 和 increment：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

注意到我们并没有显式地声明 count 和 increment，而是直接在模板中使用它们。这是因为 setup 函数会自动将其返回的对象与模板中的数据和方法进行关联。

生命周期钩子

在 Vue 2 中，生命周期钩子是组件实例的方法。在 Vue 3 中，我们可以使用 Hooks 来实现同样的功能。下面是一个简单的例子：

export default {
  setup() {
    onMounted(() => {
      console.log('mounted')
    })

    return {}
  },
}

onMounted 是一个 Hook，它会在组件挂载时执行。我们在这里打印了一条日志。

类似地，Vue 3 还提供了其他生命周期 Hook，包括 onBeforeMount、onUpdated、onBeforeUpdate、onUnmounted 等等，用法与 onMounted 相似。

Watch

Vue 3 中也提供了对于响应式对象的 Watch 功能。与 Vue 2 的 Watch 不同，Vue 3 的 Watch 需要使用 watchEffect 来捕获响应式变量的变化。

export default {
  setup() {
    const count = ref(0)

    watchEffect(() => {
      console.log(`count: ${count.value}`)
    })

    return {
      count,
    }
  },
}

这个例子中我们使用了 watchEffect 来监测 count 的变化，并在控制台输出变量值。注意到我们并没有显式地使用 watch 函数来监听 count，而是直接使用了 watchEffect。这是因为 watchEffect 会自动检测函数内部使用的响应式变量，当变量发生变化时就会执行函数。

总结

Vue 3 Hooks 的引入大大简化了组件的逻辑复用和组合，可以更方便地管理状态、生命周期和 Watch 等。本文介绍了 Vue 3 Hooks 的基础用法，包括 setup、生命周期 Hook 和 Watch。掌握这些内容可帮助你更好地使用 Vue 3 Hooks 来构建前端应用。