学习script setup 语法糖

　　函数是一个组件选项，在创建组件之前执行，一旦 props 被解析，并作组合式 API 的入口。

　　选项是一个接收 和 的函数。此外，我们将 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

　　新的 选项是在组件创建之前, 被解析之后执行，是组合式 API 的入口。

　　在添加了setup的script标签中，组件只需引入不用注册，属性和方法也不用返回，也不用写函数，也不用写，甚至是自定义指令也可以在我们的中自动获得。

　　tip：在 中应该避免使用 ，因为它不会找到组件实例。

　　要注意的是 "暴露给模板"?不同于 "暴露给外部”

　　TIP：在使用 Vue 3 生命周期的情况下，整个组件相关的业务代码，都可以放在 里执行。

　　因为在 之后，其他的生命周期才会被启用.

　　对比Vue2、Vue3生命周期变化

　　Vue 2 生命周期Vue 3 生命周期执行时间说明beforeCreatesetup组件创建前执行createdsetup组件创建后执行beforeMountonBeforeMount组件挂载到节点上之前执行mountedonMounted组件挂载完成后执行beforeUpdateonBeforeUpdate组件更新之前执行updatedonUpdated组件更新完成之后执行beforeDestroyonBeforeUnmount组件卸载之前执行destroyedonUnmounted组件卸载完成后执行errorCapturedonErrorCaptured当捕获一个来自子孙组件的异常时激活钩子函数 可以看到 Vue 2 生命周期里的 和 ，在 Vue 3 里已被 替代。

　　它是 Vue3 的一个新语法糖，在 函数中，所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。相对之前的写法，语法更简单。

　　1. 语法糖并不是新增的功能模块，它只是简化了以往的组合API的必须返回（return）的写法，并且有更好的运行时性能。

　　2.在 setup 函数中：所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。

　　使用方式：在 script 标签加上 setup 关键字即可

　　在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。

　　示例：

　　不需要使用函数,那么子组件怎么接受父组件传递过来的值呢？props，emit怎么获取呢？

　　defineProps ----> [用来接收父组件传来的 props]

　　通过指定当前 props 类型，获得上下文的props对象。

　　示例：

　　2.

　　defineEmit ----> [子组件向父组件事件传递]

　　使用定义当前组件含有的事件，并通过返回的上下文去执行 emit。

　　代码示列：

　　defineProps 用来接收父组件传来的 props ; defineEmits 用来声明触发的事件。

　　父组件

　　子组件

　　子组件通过 defineProps 接收父组件传过来的数据子组件通过 defineEmits 定义事件发送信息给父组件 获取 slots 和 attrs

　　：这是用来获取 attrs 数据，但是这和 vue2 不同，里面包含了 、、。 : 顾名思义，获取插槽数据。 使用示例：

　　defineExpose ----> [组件暴露出自己的属性]

　　传统的写法，我们可以在父组件中，通过 ref 实例的方式去访问子组件的内容，但在 script setup 中，该方法就不能用了，setup 相当于是一个闭包，除了内部的 模板，谁都不能访问内部的数据和方法。

　　的组件默认不会对外部暴露任何内部声明的属性。

　　如果有部分属性要暴露出去，可以使用

　　如果需要对外暴露 setup 中的数据和方法，需要使用 defineExpose API。

　　tip:// defineExpose无需导入，直接使用

　　示例：

　　子组件

　　父组件

　　会记住一个模板的子树，元素和组件上都可以使用。

　　该指令接收一个固定长度的数组作为依赖值进行“记忆比对”。如果数组中的每个值都和上次渲染的时候相同，则整个子树的更新会被跳过。

　　即使是虚拟 DOM 的 VNode 创建也将被跳过，因为子树的记忆副本可以被重用。

　　因此渲染的速度会非常的快。

　　tip:正确地声明记忆数组是很重要。

　　开发者有责任指定正确的依赖数组，以避免必要的更新被跳过。

　　的指令使用较少，它的作用是：缓存模板中的一部分数据。

　　只创建一次，以后就不会再更新了。也就是说用内存换取时间。

　　将变成红色

　　配置项的缺失，有时候我们需要更改组件选项，在中我们目前是无法做到的。我们需要在再引入一个 ，在上方写入对应的 即可，需要单开一个 script。

　　可以和普通的 一起使用。

　　普通的 在有这些需要的情况下或许会被使用到：

　　无法在 声明的选项，例如 或通过插件启用的自定义的选项。声明命名导出。运行副作用或者创建只需要执行一次的对象。 在script setup 外使用export default，其内容会被处理后放入原组件声明字段。

　　注意：Vue 3 SFC 一般会自动从组件的文件名推断出组件的 name。在大多数情况下，不需要明确的 name 声明。唯一需要的情况是当你需要 包含或排除或直接检查组件的选项时，你需要这个名字。

　　参考文章：https://juejin.cn/post/7209872710155206717

　　Vue3 script setup 语法糖-阿里云开发者社区 (aliyun.com)