Vue3.2 setup语法糖
是在单文件组件 (sfc) 中使用组合式 api 的编译时语法糖
解决Vue3.0中setup需要繁琐将声明的变量、函数以及 import 引入的内容通过return向外暴露,才能在使用的问题
1.
中无需return 声明的变量、函数以及import引入的内容，即可在使用
语法糖
//在template中直接使用声明的变量、函数以及import引入的内容{{ msg }}{{getToday()}}
立即学习“前端免费学习笔记（深入）”；
标准组件 需要写setup函数并繁琐retrun
{{ msg }}{{getToday()}}
立即学习“前端免费学习笔记（深入）”；
小结：语法糖里面的代码会被编译成组件 setup() 函数的内容，不需要通过return暴露 声明的变量、函数以及import引入的内容，即可在使用，并且不需要写export default{}
语法糖里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 只在组件被首次引入的时候执行一次不同， 中的代码会在每次组件实例被创建的时候执行
（script-setup标签最终都会编译成setup() 函数的内容，每次实例化组件，就是实例化一次setup函数。script标签里面的setup函数也是一样每次实例化组件，就是实例化一次setup函数，但是script标签setup是需要写在export default{}内的，外的只是首次引入的时候执行一次）
2、
不需要在引入组件后，通过 components:{}注册组件，可直接使用
zuojiankuohaophpcnscript setupyoujiankuohaophpcn
import MyComponent from './MyComponent.vue'
//components:{MyComponent} 不需要注册直接使用
zuojiankuohaophpcn/scriptyoujiankuohaophpcn
zuojiankuohaophpcntemplateyoujiankuohaophpcn
zuojiankuohaophpcnMyComponent /youjiankuohaophpcn
zuojiankuohaophpcn/templateyoujiankuohaophpcn3、组件通信:
在中必须使用 defineProps 和 defineEmits API 来替代 props 和 emits
defineProps 和 defineEmits具备完整的类型推断并且在 中是直接可用的(浏览了一下掘金，发现大部分文章demo还是通过import引入这2个api，这点官方文档写得很清楚)
defineProps 代替props
接收父组件传递的数据（父组件向子组件传参）
父组件:
父组件
子组件：
中可以直接使用父组件传递的props （可省略props.）
子组件父组件传递的值：{{title}}
defineEmit 代替emit
子组件向父组件传递数据（子组件向外暴露数据）
子组件代码:
子组件
父组件代码:
父组件接收子组件传递的数据{{childData}}
4.
使用 的组件，父组件是无法通过ref 或者 $parent 获取到子组件的ref等响应数据，需要通过defineExpose 主动暴露
子组件代码：
父组件代码:
父组件
5.语法糖其他功能
useSlots 和 useAttrs （少用，由于大部分人是SFC模式开发，在通过
如果需要在script-setup中使用 slots 和 attrs 需要用useSlots 和 useAttrs替代
需要引入：import { useSlots ,useAttrs } form 'vue'
在中通过 $slots 和 $attrs 来访问更方便（attrs用来获取父组件中非props的传递到子组件的参数/方法，attrs 用来获取父组件中非props的传递到子组件的参数/方法，attrs用来获取父组件中非props的传递到子组件的参数/方法，slots可以获取父组件中插槽传递的虚拟dom对象，在SFC模式应该用处不大，在JSX /TSX使用比较多）
父组件:
默认插槽 具名插槽
子组件：
{{ attrs.msg == $attrs.msg }}
{{ slots == $slots }}
useSlots或许在JSX/TSX下更实用
想使用JSX语法在vite需要下载相关jsx的plugins才能识别jsx
useSlots 可以获取父组件传递过来插槽的虚拟dom对象，可以用来渲染插槽内容
大部分人是SFC模式开发，在通过
6.在setup访问路由
访问路由实例组件信息：route和router
setup 里不能访问 this，不能再直接访问 this.$router 或 this.$route。（getCurrentInstance可以替代this但不推荐）
推荐：使用useRoute 函数和useRouter函数替代this.$route 和 this.$router
