本文已参与「新人创作礼」活动，一起开启掘金创作之路。--vue3中setup

本文已参与「新人创作礼」活动，一起开启掘金创作之路

Vue 3 中新增了 setup 函数，这是一种用于初始化组件选项的方法。setup 函数是 Vue 3 中的一项重要功能，它可以让你在组件中使用最新的 Composition API 来编写代码。

首先，你可以在组件中定义 setup 函数：

<template>
  <p>{{ message }}</p>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello from Vue 3')

    return { message }
  }
}
</script>

setup 函数会返回一个对象，其中包含组件所需的数据和方法。在上面的代码中，我们使用了 ref 函数来创建一个可响应的数据对象，并将它添加到 setup 返回的对象中。

你也可以使用 setup 函数来获取组件的上下文信息，例如 props、slots 和 events。例如，你可以在 setup 中获取 prop 并将它绑定到数据中：

<template>
  <p>{{ message }}</p>
</template>

<script>
import { ref } from 'vue'

export default {
  props: {
    initialMessage: String
  },
  setup(props) {
    const message = ref(props.initialMessage)

    return { message }
  }
}

另外，你还可以使用 setup 函数来处理计算属性和方法：

<template>
  <p>{{ reversedMessage }}</p>
</template>

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

export default {
  props: {
    initialMessage: String
  },
  setup(props) {
    const message = ref(props.initialMessage)

    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('')
    })

    return { message, reversedMessage }
  }
}
</script>

在上面的代码中，我们使用了 computed 函数来创建一个计算属性，该属性会返回 message 的反转字符串。

总的来说，setup 函数是 Vue 3 中用于初始化组件选项的一种强大方法。它可以让你在组件中使用最新的 Composition API 来编写代码，并提供了许多强大的功能，例如获取组件上下文信息、处理计算属性和方法等。