1. 优点
- 省去export default 导出
- 省去setup函数及返回
<template>
<button @click="log">{{ msg }}</button>
</template>
<script setup>
// 变量
const msg = 'Hello!'
// 函数
function log() {
console.log(msg)
}
</script>
2. 其他用法
<template>
<button @click="count++">{{ count }}</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<MyComponent />
</template>
<script setup>
import MyComponent from './MyComponent.vue'
</script>
<template>
<span>{{ props.msg }}</span>
</template>
<script setup>
import { useContext, defineProps, defineEmits } from 'vue'。
const emit = defineEmits(['change', 'delete'])
const ctx = useContext()
const props = defineProps({
msg: String,
})
<template>
<span>123</span>
</template>
<script setup>
import { reactive } from 'vue'
const state = reactive({
color: 'green'
})
</script>
<style scoped>
span {
color: v-bind('state.color');
}