VUE3的 单文件组件 ＜script setup＞理解与实际上手案例
在Vue 3中，<script setup>是一个编译时的特性，它允许你写更简洁的单文件组件。它的工作原理是通过在单文件组件中使用<script setup>标签，然后在背后自动生成reactivity、props、emits等的样板代码。
下面是一个使用<script setup>的Vue 3组件示例：
<template>
<button @click="increment">{{ count }}</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
</script>在这个例子中，我们创建了一个简单的按钮，它有一个状态变量count，并且有一个函数increment来增加count的值。我们使用<script setup>包裹了这个逻辑，不需要像传统方式那样写export default。
这个特性让组件的编写更加简洁，减少了样板代码的数量，使得开发者可以更快速地构建Vue应用。
评论已关闭