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创建的响应式对象上调用，以保证更新的正确性和性能。