script setup基本使用

Composition API：使用 script setup 分离 Vue 3 逻辑

简介

在 Vue 3 中，Composition API 引入了 script setup，这是一个改变游戏规则的新特性。它让我们能够轻松地将组件逻辑与模板分离，从而创造出更易于管理、维护和理解的组件。

script setup 的基本原理

script setup 允许我们将 props、data、methods 和 computed 属性直接定义在 setup 函数中，然后轻松地将其绑定到模板。这与 Vue 2 中将这些属性分散在不同的选项对象中形成鲜明对比。

为什么使用 script setup？

script setup 的主要优点是它增强了组件的可管理性。想象一下一个包含大量逻辑的复杂组件。在 Vue 2 中，管理所有这些逻辑可能是一场噩梦，因为它们分散在多个选项对象中。script setup 通过将所有逻辑集中到一个地方来解决这个问题，从而更容易理解和维护。

此外，script setup 可以减少模板中的代码量，使其更加简洁和易读。通过将逻辑移出模板，我们可以专注于组件的视觉表示，而不必担心幕后发生的事情。

script setup 的用法

要使用 script setup，只需在组件的 SFC 中添加一个 <script setup> 标签。然后，在 setup 函数中定义你的逻辑：

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

<script setup>
const message = 'Hello, Vue 3!'
</script>

定义 props

使用 defineProps 函数定义 props：

<script setup>
const props = defineProps({
  message: {
    type: String,
    default: 'Hello, Vue 3!'
  }
})
</script>

定义 data

使用 reactive 函数定义 data：

<script setup>
const data = reactive({
  message: 'Hello, Vue 3!'
})
</script>

定义 methods

使用 methods 对象定义 methods：

<script setup>
const methods = {
  showMessage() {
    alert('Hello, Vue 3!')
  }
}
</script>

定义 computed 属性

使用 computed 函数定义 computed 属性：

<script setup>
const message = computed(() => {
  return 'Hello, Vue 3!'
})
</script>

常见问题解答

• script setup 是否取代了 options API？

  不，script setup 只是 Composition API 的一部分，它可以与 options API 一起使用。

• script setup 有什么缺点？

  script setup 的一个潜在缺点是它可能更难调试，因为所有逻辑都集中在一个函数中。

• 我应该在所有组件中使用 script setup 吗？

  这取决于组件的复杂性。对于简单的组件，options API 可能更容易，而对于复杂组件，script setup 可以提供更好的组织和可维护性。

• script setup 如何影响组件生命周期钩子？

  script setup 仍然可以使用组件生命周期钩子，但它们需要通过 setup 函数中的 onX 函数来定义。

• script setup 是否与 Vuex 兼容？

  是的，script setup 与 Vuex 兼容。

结论

script setup 是 Composition API 中的一个强大工具，可以显着提高 Vue 3 组件的可管理性、可维护性和可读性。通过将逻辑与模板分离，我们可以创建更清晰、更容易理解的组件，从而改善开发体验。