methods在<script setup>中写法

在 <script setup> 中定义 methods 非常简单，我们只需要像定义普通的变量一样，使用 function 来定义方法即可。下面是一个例子：

<template>
  <div>
    <button @click="increment">+1</button>
    <span>{{ count }}</span>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

在这个例子中，我们定义了一个名为 increment 的方法，它的作用是将 count 的值加 1。我们在模板中通过 @click 来监听按钮的点击事件，并调用 increment 方法。这样，我们就可以在 <script setup> 中方便地定义组件的方法了。

相关问题

改成 <script setup>写法

当使用 `<script setup>` 时，`methods` 需要使用 `defineExpose` 方法来暴露出去。同时，需要使用 `useRouter` 和 `useRoute` 方法来获取路由实例和当前路由信息。代码如下：

<template>
  <div>
    <!-- 登录表单 -->
    <form>
      <!-- 表单内容 -->
      <button type="submit" @click.prevent="login">登录</button>
    </form>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const login = () => {
  // 登录成功后跳转到之前要访问的页面
  router.push({
    path: '/',
    query: { redirect: route.fullPath }
  })
}

defineExpose({ login })
</script>

其中，`useRouter` 和 `useRoute` 是 Vue Router 提供的 Composition API，用于在 `<script setup>` 中获取路由实例和当前路由信息。`login` 方法在定义后，需要通过 `defineExpose` 方法暴露出去，以便在模板中使用。

vue <script setup> 写法与 data() methods的写法哪个更好

在Vue 3中，`<script setup>`是一种新的语法糖，它可以帮助我们更快速地编写代码，并且更好地组织我们的组件。与传统的`data()`和`methods`相比，`<script setup>`可以让我们更少地编写模板代码，同时也可以更好地支持TypeScript。

对于使用`<script setup>`还是`data()`和`methods`，这取决于您的具体需求和编程风格。以下是一些比较常见的情况：

- 如果您的组件比较简单，只需要一些基本的数据和方法，那么使用`<script setup>`会更加简单方便。在`<script setup>`中，您可以直接声明变量和函数，而不需要使用`data()`和`methods`。同时，`<script setup>`还支持更加简洁的箭头函数语法，可以更好地减少代码量。

- 如果您的组件比较复杂，需要使用到一些高级特性，例如计算属性、监听器、生命周期钩子等等，那么使用`data()`和`methods`会更加灵活。在`data()`和`methods`中，您可以使用Vue的所有特性，同时也可以更好地组织您的代码。

总的来说，`<script setup>`是一种比较新的语法糖，它可以让我们更加快速地编写代码，但是在一些复杂的场景下，使用`data()`和`methods`会更加灵活。需要根据具体情况来选择使用哪种方式。