VUE3如何声明方法

在Vue 3中，声明方法主要有两种方式：直接在模板内使用`v-once`指令或`setup()`函数。

**1. 模板内声明方法（适用于小型应用或简单的功能）**：

<template>
  <button @click="doSomething">点击我</button>
</template>

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

function doSomething() {
  console.log('This is a method');
}
</script>

在这里，我们使用了`@click`事件修饰符来绑定一个名为`doSomething`的函数到按钮的点击事件。

**2. `setup()`函数（推荐用于大型应用或需要更复杂逻辑的方法）**：
在`setup()`函数中，你可以定义更复杂的组件状态以及它们的响应式处理，并使用`defineAsyncComponent`等高级特性。比如：

<script setup>
import { onMounted, defineAsyncComponent } from 'vue';

const MyAsyncComponent = defineAsyncComponent(() => import('./MyComponent.vue'));

async function doSomething() {
  await new Promise((resolve) => setTimeout(resolve, 1000)); // 异步操作示例
  console.log('This is a method');
}

onMounted(() => {
  document.getElementById('myButton').addEventListener('click', doSomething);
});
</script>

在这里，`doSomething`函数可以在`mounted`生命周期钩子中添加到DOM元素的事件监听器中。

注意：在Vue 3 Composition API中，所有的副作用（如修改状态和添加事件监听）都应在生命周期钩子或`reactive`/`ref`创建的响应式对象上调用，以保证更新的正确性和性能。