Vue3 ＜script setup＞是什么？作用？

结论先行：

<script setup> 是 Vue3 的语法糖，简化了组合式 API 的写法，实现了 “顶层的绑定”。例如：

① 声明的属性和方法无需 return，就可以直接在模板使用；

② 引入组件的时候，会自动注册，无需通过 components 手动注册

③ 使用 defineProps 接收父组件传递的值，defineEmits 定义自定义事件

④ 默认不会对外暴露任何属性和方法，如果要暴露的话使用 defineExpose

⑤ useAttrs 获取属性，useSlots 获取插槽

 

 具体解析：

1、<script setup> 是什么？ 

<script setup> 是在 Vue3.2 之后新增的语法糖，简化了组合式 API 的写法，并且运行性能更好。

在单文件组件 SFC 中使用 Composition 组合式 API 的 " 编译时 " 语法糖。

基本语法：需要在 <script> 代码块加上 setup 属性

<script setup>console.log('你好，script setup')
</script>

<script setup> 和 <script> 的执行时机是不同的：

• 普通的 <script> 只会在组件第一次被引入的时候执行一次
• 而 <script setup> 中的代码会在每次组件实例被创建的时候执行

 

2、<script setup> 语法糖的特点： 

① 不需要再手动写 setup(){ }

因为在 setup 函数中，所有 ES 模块导出都被认为是暴露给上下文的值。

<script setup>console.log('你好，script setup')
</script>

 ② 属性和方法无需返回，可以直接使用。

不需要写 return，直接声明数据就可以在模板中使用了。 因为已经在 <script setup> 标签中，实现了 “顶层的绑定”。

解决了之前需要将声明的变量、函数以及 import 引入的内容，通过 return 向外暴露才能模板中使用的问题。

<template><p>{{ msg }}</p>
</template><script setup>const msg = ref('hello')
</script>

 ③ 引入组件的时候，会自动注册，无需通过 components 手动注册。

<template><com>{{ msg }}</com>
</template><script setup>import com from './com.vue'
</script>

④ 使用 defineProps 接收父组件传递的值。

defineProps 是 Vue3 的一个宏函数，使用时可不导入，参数与 Vue2 的 props 选项相同。

defineProps 返回的 props 对象，是一个响应式 proxy 对象，特性与 reactive 基本相同。但是，定义的 props 对象的值是只读的，而且可以在模板中直接使用属性。

<template><p>{{ msg }}</p>
</template><script setup>const props = defineProps({msg: String,name: {type: String,default: '默认值'}})console.log(props.name)props.name = 'haha' // 不能修改，声明的props的值是只读的
</script>

⑤ useAttrs 获取属性，useSlots 获取插槽，defineEmits 获取自定义事件，defineExpose 对外暴露

 useAttrs：接收父组件传递的属性和事件；

在组件中可以直接使用这些属性和事件，无需在 props 和 emits 中声明。在模板中就可以直接使用它们。

与 defineProps 相比，useAttrs 的优先级较低。

useAttrs 能够接收到所有属性，但不能够对接收到的属性进行类型校验和默认值设置。

<template><div><p>{{ title }}</p><button @click="onClick">点击</button></div>
</template><script setup>
import { useAttrs } from 'vue'
const { title, onClick } = useAttrs()
</script>

defineEmits：父组件向子组件传递函数； 

defineExpose：可以将子组件中的属性和方法暴露给父组件

默认不会对外暴露任何属性和方法

父组件：

<template><p>父组件</p><child ref="childRef" :value="parentValue" @func="func"/>
</template><script setup>
import child from "./child";const parentValue = ref('我是爸爸');
const func = (params) => {parentValue.value = params
};const childRef = ref(null);
onMounted(()=>{// 调用子组件中的参数和函数console.log(childRef.value.a);childRef.value.childFn();
});
</script><script>
export default {name: "parent"
}
</script>

子组件：

<template><p>子组件</p><p>{{ value }}</p><button @click="emit('func', '哈哈哈')">点击</button>
</template><script setup>
import { defineProps, defineEmits, defineExpose } from 'vue'// 接收父级传过来的参数
const props = defineProps(["value"]);
// 接收父级传过来的方法
const emit = defineEmits(["func"]);const childValue = '我是儿子';
const childFn = () => {console.log("我是子组件中的方法");
}// 将参数childValue和函数childFn暴露给父组件
defineExpose({childValue,childFn
});
</script><script>
export default {name: "child"
}
</script>