以下是一个使用渲染函数 API 的简单示例：
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const message = ref('Hello from Render Function API');
const updateMessage = () => {
message.value = 'Updated Message';
};
return {
message,
updateMessage
};
// 渲染函数 API 的替代写法
// return () => {
// return (
// <div>
// <p>{message.value}</p>
// <button onClick={updateMessage}>Update Message</button>
// </div>
// );
// };
}
};
</script>
在上述示例中，setup 函数返回了组件的状态和方法，并且你可以使用 JSX 的方式（被注释的部分）定义渲染函数。
在 setup 函数中返回一个对象，对象中的属性将会暴露给模板，函数中的逻辑将会在组件初始化时执行。这种方式让你可以更灵活地组织代码，尤其是在处理逻辑较为复杂的组件时。
需要注意的是，在 Vue 3.0 中，模板中的 this 指向的是组件实例，但在 setup 函数中，this 指向的是上下文对象，并不是组件实例。因此，如果你需要访问组件实例，可以通过 getCurrentInstance 函数获取。
转载请注明出处：http://www.zyzy.cn/article/detail/554/Vue 3.0