1. 使用 template 选项
在 Vue 3.0 中，你仍然可以使用 template 选项来定义组件的模板，但是它只是 Composition API 的一种语法糖。实际上，Vue 3.0 的模板是通过 setup 函数和 return 语句来创建的。
<template>
<div>
<h1>{{ message }}</h1>
<button @click="increaseCount">Increase Count</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue 3.0!',
count: 0,
};
},
methods: {
increaseCount() {
this.count++;
},
},
};
</script>
2. 使用 Composition API
在 Vue 3.0 中，更推荐使用 Composition API 来组织组件的逻辑。以下是使用 Composition API 的示例：
<template>
<div>
<h1>{{ message }}</h1>
<button @click="increaseCount">Increase Count</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue 3.0!');
const count = ref(0);
const increaseCount = () => {
count.value++;
};
return {
message,
increaseCount,
};
},
};
</script>
在这个示例中，我们使用 ref 函数创建了响应式数据 message 和 count。然后，通过 setup 函数返回这些数据和一个处理点击事件的函数。这种方式更加灵活和明确，使得组件的逻辑更容易理解和维护。
总体而言，在 Vue 3.0 中，template 选项仍然可用，但推荐使用 Composition API 来组织组件的逻辑，以获得更强大和灵活的功能。
转载请注明出处：http://www.zyzy.cn/article/detail/568/Vue 3.0