Vue 方法

在 Vue 组件中，方法 (Methods) 是定义在 <script setup> 内的函数，它们通常用于响应事件、执行计算或封装可复用的逻辑。这些方法可以被模板中的事件处理器调用，或者在组件的其他逻辑中使用。

定义方法

在 Vue 3 的组合式 API (Composition API) 中，我们直接在 <script setup> 块中声明函数即可。这些函数会自动暴露给模板使用。

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

const name = ref('Vue.js')

// 定义一个方法
function greet() {
  // 方法可以访问 <script setup> 作用域内的所有变量和函数
  alert(`Hello, ${name.value}!`);
}
</script>

<template>
  <!-- 在模板中通过 @click 事件调用这个方法 -->
  <button @click="greet">Greet</button>
</template>

在这个例子中：

1. 我们定义了一个名为 greet 的函数。
2. 这个函数可以访问响应式变量 name。注意，在 <script> 部分访问 ref 创建的变量时，需要使用 .value。
3. 在模板中，我们使用 @click="greet" 将按钮的点击事件绑定到 greet 方法上。当按钮被点击时，greet 函数就会执行。

带参数的方法

方法可以接受参数。你可以在调用它们时传递静态值或动态数据。

<script setup>
function say(message) {
  alert(message)
}
</script>

<template>
  <!-- 传递一个静态字符串 -->
  <button @click="say('hello')">Say hello</button>

  <!-- 传递一个动态变量 (假设 msg 是一个 ref 或其他变量) -->
  <button @click="say(msg)">Say msg</button>
</template>

事件对象

有时，你需要访问原生的 DOM 事件对象。你可以将特殊的 $event 变量传入一个方法中：

<script setup>
function warn(message, event) {
  // 现在我们可以访问原生事件对象
  if (event) {
    event.preventDefault()
  }
  alert(message)
}
</script>

<template>
  <!-- 在这里，我们使用 $event 变量来传入原生的 DOM 事件 -->
  <button @click="warn('Form cannot be submitted yet.', $event)">
    Submit
  </button>
</template>

如果事件处理器是内联函数（一个箭头函数），事件对象也会被自动传入：

<template>
  <button @click="(event) => warn('Form cannot be submitted yet.', event)">
    Submit
  </button>
</template>

方法与普通函数的区别

在组合式 API 的上下文中，“方法”这个术语更多是一种概念上的称呼，指的是那些为了响应事件或封装特定行为而创建的函数。从技术上讲，它们就是普通的 JavaScript 函数。

与 Vue 2 的选项式 API (Options API) 不同，在组合式 API 中，你不需要将方法定义在一个特定的 methods 对象里。你只需在 <script setup> 中声明函数，Vue 就会自动处理剩下的事情，使其在模板中可用。

这种方式提供了更大的灵活性，让你可以根据逻辑功能来组织代码，而不是被固定的选项结构所限制。