在 Vue 3 中,你可以使用 setup
函数来定义组件的数据和方法。在 setup
函数中,你可以使用 ref
、reactive
和 computed
等 Vue 3 的响应式 API 来定义数据,并返回一个包含你需要公开的数据和方法的对象。下面是一个例子:
import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const message = ref('Hello World'); function showMessage() { alert(message.value); } return { message, showMessage }; } });
在这个例子中,我们使用 ref
函数来定义了一个名为 message
的响应式数据,并将其初始化为字符串 'Hello World'
。我们还定义了一个名为 showMessage
的方法,它在被调用时会弹出一个包含 message
的提示框。最后,我们在 setup
函数的返回值中将 message
和 showMessage
作为一个对象返回,这样它们就可以在组件的模板中使用了。
在组件的模板中,你可以使用插值语法和 v-on
指令来访问这些数据和方法。例如:
<template> <div> <p>{{ message }}</p> <button @click="showMessage">显示消息</button> </div> </template>
在这个例子中,我们使用 {{ message }}
插值语法来显示 message
的值,并使用 @click
绑定了 showMessage
方法。当按钮被点击时,showMessage
方法就会被调用,弹出一个包含 message
的提示框。
需要注意的是,在 Vue 3 中,setup
函数是组件中定义数据和方法的主要方式。其他选项(如 data
、methods
和 computed
)仍然可以使用,但它们只是 setup
函数的语法糖。如果你使用这些选项来定义数据和方法,Vue 3 会将它们转换为 setup
函数中的等效代码。