详解vue3.2中setup语法糖：script lang=”ts” setup

Vue 3.2 中的 setup 语法糖是一个新功能，它可以显著简化 Vue 组件的编写过程。它允许我们以一种简洁而直观的方式组织组件逻辑，从而更好地实现代码的可读性和可维护性。在本篇攻略中，我们将详细讲解 setup 语法糖的使用方法，并且通过两个示例来展示其强大的功能。

什么是 setup 语法糖

在 Vue 3 中，组件选项对象中的 setup 函数是一个新的选项，它是一个在组件渲染过程中被调用的函数，类似于 Vue.js 2.x 中的 created() 和 mounted() 钩子。它的主要作用是提供组件的响应式状态和方法。

在 Vue 3.2 中，我们可以使用 setup 语法糖来更简洁地定义这个函数。使用 setup 语法糖的方式是在 <script> 标签上添加一个 lang="ts" 属性，并在 <script> 标签中使用 setup 字段来定义这个函数。

下面是一个使用 setup 语法糖的示例：

<template>
  <div>{{ message }}</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const message = ref('Hello, Vue 3.2!')

export default {
  setup() {
    return { message }
  }
}
</script>

在上面的示例中，我们使用了 setup 语法糖来定义了这个组件的响应式状态 message，使用了 ref 来创建一个响应式状态。然后，我们在 setup 函数中将 message 作为返回值返回，这样就可以在模板中使用这个状态了。

如何在 setup 中使用函数

在 setup 中定义函数也是非常简单的。我们可以像下面的示例一样，直接在 setup 函数中添加函数逻辑。

<template>
  <div>{{ message }}</div>
  <button @click="reverseMessage()">Reverse Message</button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const message = ref('Hello, Vue 3.2!')

function reverseMessage() {
  message.value = message.value.split('').reverse().join('')
}

export default {
  setup() {
    return { message, reverseMessage }
  }
}
</script>

在上面的示例中，我们添加了一个 reverseMessage() 函数，这个函数可以将 message 中的文本反转。我们再次在 setup 函数中将 message 和 reverseMessage 作为返回值返回，这样就可以在模板中使用这个函数并更新状态了。

setup 中的类型推断

由于 setup 函数是一个 TypeScript 函数，因此 Vue 3.2 也可以通过类型推断来推断出组件的 props 和响应式状态等。下面是一个简单的示例：

<template>
  <div>{{ message }}</div>
</template>

<script lang="ts" setup>
const message = ref(props.initialMessage)

export default {
  props: ['initialMessage'],
  setup(props) {
    return { message }
  }
}
</script>

在上面的示例中，我们将 initialMessage 作为组件的 props 传入，并在 setup 函数中使用 props 作为参数，来实现类型推断。

总结

使用 setup 语法糖可以帮助我们更好地组织组件逻辑，从而提高代码的可读性和可维护性。在 setup 函数中，我们可以轻松地定义响应式状态、添加函数逻辑和实现类型推断等。