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

结论先行：

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

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

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

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

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

⑤ 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>