Vue3 组合式 API学习笔记

在 Vue3 中，我们可以使用组合式 API 来编写更具可读性和可维护性的代码。和之前通过 options API 定义的 Vue 组件不同，组合式 API 使得我们能够将相关逻辑组织成更小、更具体的函数，并且能够更好地重用代码。

setup 函数

组合式 API 需要在一个名为 setup 的函数中进行编写。setup 函数会在组件实例被创建之前执行，因此我们可以在其中执行初始化操作或者返回一些响应式数据给模板使用。

以下是一个简单的组件示例：

Copy Code
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="handleClick">Increase</button>
  </div>
</template>

<script>
import { ref } from 'vue'

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

    function handleClick() {
      count.value++
    }

    return {
      count,
      handleClick
    }
  }
}
</script>

在上面的代码中，我们通过 ref 函数来创建一个响应式的 count 变量，并且将其添加到返回对象中。随后我们定义了一个叫做 handleClick 的函数，它会在按钮被点击时将 count 的值加 1。最后，在 setup 函数中通过 return 语句将 count 和 handleClick 返回给模板使用。

组件生命周期钩子函数

在 Vue2 中，我们可以使用多个生命周期钩子函数来执行组件的初始化、更新等操作。而在 Vue3 中，由于 setup 函数的存在，生命周期钩子函数被大大简化。

在组合式 API 中，我们可以使用 onMounted、onUpdated 等函数来代替 Vue2 中的生命周期钩子函数。这些函数将会在相应的阶段被调用，从而让我们能够更好地控制组件的行为。

以下是一个实例，演示了如何使用 onMounted 函数：

Copy Code
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="handleClick">Increase</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

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

    function handleClick() {
      count.value++
    }

    onMounted(() => {
      console.log('Component mounted')
    })

    return {
      count,
      handleClick
    }
  }
}
</script>

在上面的代码中，我们通过 onMounted 函数来定义了一个组件被挂载到 DOM 上后的操作，即输出一条日志。这样，当组件被创建并挂载到 DOM 上之后，就会自动调用 onMounted 函数，并输出一条日志。

自定义 Hook

值得强调的是，在组合式 API 中，我们可以轻松地定义自己的 Hook 函数，从而达到复用代码的目的。自定义 Hook 函数可以帮助我们更好地分离组件中的逻辑，使得它们更加具有可读性和可维护性。

以下是一个自定义 Hook 函数的例子：

Copy Code
import { ref, onMounted } from 'vue'

export function useTimer() {
  const time = ref(new Date())

  onMounted(() => {
    setInterval(() => {
      time.value = new Date()
    }, 1000)
  })

  return time
}

在上面的代码中，我们定义了一个名为 useTimer 的 Hook 函数，它会返回一个响应式的 time 变量，并且每秒钟更新一次。随后，我们就可以在任何组件中使用这个 Hook 函数，并且通过 time 来展示当前时间。如下所示：

Copy Code
<template>
  <div>
    <p>{{ currentTime }}</p>
  </div>
</template>

<script>
import { useTimer } from '@/hooks/use-timer'

export default {
  setup() {
    const currentTime = useTimer()

    return {
      currentTime
    }
  }
}
</script>

在上面的代码中，我们可以直接在组件中通过调用 useTimer 函数来获取当前时间，并将其赋给 currentTime 变量。这样，我们就可以在模板中展示出当前时间。

总结

组合式 API 是 Vue3 中非常有价值的特性，它让开发者能够更好地组织代码、提高代码可读性和可维护性。在使用组合式 API 开发 Vue3 应用时，我们需要关注一些新的函数和用法，例如 setup 函数、组件生命周期钩子函数、自定义 Hook 函数等等。通过不断地练习和实践，我们可以更加熟练地掌握这些技术，并编写出更高质量的 Vue3 应用。