<script setup>是 Vue 3 中引入的一种新的组件内脚本语法糖，它带来了更简洁、高效的组件逻辑编写方式。
以下是 <script setup> 的主要语法元素和特性：
1.导入和使用
- 直接在
<script setup>中导入依赖，不需要在components、directives等选项中声明。 - 导入的组件和指令可以直接在模板中使用。
2.响应式数据:
- 使用
ref和reactive来创建响应式的数据。 ref用于基本类型，reactive用于对象。- 示例：
import { ref, reactive } from 'vue'
const count = ref(0)
const state = reactive({ message: 'Hello World' })3.计算属性:
- 使用
computed来定义计算属性。 - 示例：
import { computed } from 'vue'
const reversedMessage = computed(() => state.message.split('').reverse().join(''))4.侦听器:
- 使用
watch和watchEffect来监听数据的变化。 - 示例：
import { watch, watchEffect } from 'vue'
watch(count, (newVal, oldVal) => {
console.log(`count changed from ${oldVal} to ${newVal}`)
})
watchEffect(() => {
console.log(`current count value is: ${count.value}`)
})5.生命周期钩子:
- 可以直接在
<script setup>中使用生命周期钩子，如onMounted,onUnmounted,onBeforeUpdate、onUpdated、onBeforeUnmount和onUnmounted等等。 - 示例：
import { onMounted, onUnmounted } from 'vue'
onMounted(() => {
console.log('Component mounted')
})
onUnmounted(() => {
console.log('Component unmounted')
})6.Props 解构:
- 使用
defineProps编译宏来定义组件接收的属性，它接收一个对象或者基于类型的声明。 - 在组件使用时就能接收外部传入的对应属性值了，并且在模板中可以像使用普通变量一样使用
props中的属性。 - 使用
defineProps接收父组件传递的 props。 - 示例：
<template>
<div>{{ title }}</div>
</template>
<script setup>
// 基于对象的方式定义props
const props = defineProps({
title: String
})
// 基于类型的方式（如果使用TypeScript）
// const props = defineProps<{ title: string }>()
</script>7.事件处理:
- 使用
defineEmits编译宏来声明组件向外触发的自定义事件。 - 示例：
<template>
<button @click="emitCustomEvent">触发事件</button>
</template>
<script setup>
const emits = defineEmits(['custom-event'])
const emitCustomEvent = () => {
emits('custom-event', '传递的数据')
}
</script>8. 默认导出:
不再需要 export default，因为所有顶层绑定会自动暴露给模板。
9.解构 Props 和 Emits:
- 直接解构
props和emit而无需担心失去响应性。 - 示例
const { title, isActive } = defineProps(['title', 'isActive'])
const emit = defineEmits(['update:title'])10.访问父组件和根实例属性（有限制）
- 在
<script setup>中访问父组件或根实例的属性不像传统的this.$parent或this.$root那样方便，不过可以通过getCurrentInstance函数（但官方不建议过度依赖此方式用于普通场景，主要用于一些高级的、框架层面的扩展等情况）来获取组件实例相关信息。 - 例如：
<script setup>
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
// 可以通过instance来访问一些实例相关信息，不过要谨慎使用
</script>
