vue3组合式API中setup()概念和reactive()函数的用法

Vue 3的组合式API是一种全新的API，可以帮助我们更好地组织代码，以及管理组件内的状态和逻辑。其中，setup()是一个非常重要的概念，而reactive()则是其核心函数之一。

什么是setup()函数

setup()函数是组合式API中的一个重要概念，它允许我们在组件初始化时进行一些设置，例如定义变量、创建函数等等。这个函数在组件实例化之前被调用，然后将返回一个对象，该对象包含所有我们要在组件中使用的常量、变量和函数。

其中，setup()函数的理解十分重要，需要明白 setup() 函数是在 beforeCreate 和 created 生命周期之间执行的函数。注意，setup() 函数是在组件实例化之前执行的。

什么是reactive()函数

reactive()函数是组合式API提供的一种响应式数据类型，在Vue 3中被广泛使用。它用来创建响应式的对象，即一个对象的属性的修改能够自动触发界面的重新渲染。reactive()函数并不会深度地监听对象的属性，但我们可以通过 ref() 和 reactive() 的结合来实现对对象属性或者函数返回值的监听。

如何在组合式API中使用setup()和reactive()

下面，我们将演示如何在Vue 3中使用setup()和reactive()函数。

首先，我们在组件中创建一个响应式对象，我们可以使用reactive()来实现：

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0
    })

    return {
      state
    }
  }
}

这里，我们首先从vue中导入reactive()函数，并在setup()函数中使用它来创建一个响应式对象。在这种情况下，我们创建一个名为state的对象，其中包含一个名为count的属性，其值初始为0。然后，我们将state对象返回，以便在组件中使用它。

接着，我们可以在组件中使用state对象来显示倒计时的值：

<template>
  <div>
    <p>{{ state.count }}</p>
    <button @click="state.count--">Decrease</button>
    <button @click="state.count++">Increase</button>
  </div>
</template>

<script>
  import { reactive } from 'vue'

  export default {
    setup() {
      const state = reactive({
        count: 0
      })

      return {
        state
      }
    }
  }
</script>

在这个示例中，我们使用{{ state.count }}来显示state对象的count属性的值，并在单击按钮时增加或减少count属性的值。

总的来说，setup()和reactive()是Vue 3组合式API中非常重要的概念和函数，掌握它们可以帮助我们更好地构建Vue 3应用程序。