vue3.2 setup语法糖5101c0cdbdc49998c642c71f6b6410a8 是在单文件组件 (sfc) 中使用组合式 api 的编译时语法糖
解决vue3.0中setup需要繁琐将声明的变量、函数以及 import 引入的内容通过return向外暴露,才能在dcdc0fa59b5fea5bdae0d810c3919fcd使用的问题
1.5101c0cdbdc49998c642c71f6b6410a8在dcdc0fa59b5fea5bdae0d810c3919fcd使用5101c0cdbdc49998c642c71f6b6410a8中无需return 声明的变量、函数以及import引入的内容，即可在dcdc0fa59b5fea5bdae0d810c3919fcd使用
5101c0cdbdc49998c642c71f6b6410a8语法糖
<script setup>//import引入的内容import { gettoday } from './utils' // 变量const msg = 'hello!'// 函数function log() { console.log(msg)}</script>//在template中直接使用声明的变量、函数以及import引入的内容<template> <div @click="log">{{ msg }}</div> <p>{{gettoday()}}</p></template>
标准组件<script> 需要写setup函数并繁琐retrun
<script>//import引入的内容import { gettoday } from './utils' export default{ setup(){ // 变量 const msg = 'hello!' // 函数 function log() { console.log(msg) } //想在tempate里面使用需要在setup内return暴露出来 return{ msg, log, gettoday } }}</script><template> <div @click="log">{{ msg }}</div> <p>{{gettoday()}}</p></template>
小结：<script setup>语法糖里面的代码会被编译成组件 setup() 函数的内容，不需要通过return暴露 声明的变量、函数以及import引入的内容，即可在<template/>使用，并且不需要写export default{}
<script setup>语法糖里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同，<script setup> 中的代码会在每次组件实例被创建的时候执行
<script> console.log('script');//多次实例组件,只触发一次 export default { setup() { console.log('setupfn');//每次实例化组件都触发和script-setup标签一样 } } </script>
（script-setup标签最终都会编译成setup() 函数的内容，每次实例化组件，就是实例化一次setup函数。script标签里面的setup函数也是一样每次实例化组件，就是实例化一次setup函数，但是script标签setup是需要写在export default{}内的，外的只是首次引入的时候执行一次）
2、<script setup>引入组件将自动注册不需要在引入组件后，通过 components:{}注册组件，可直接使用
&lt;script setup&gt;import mycomponent from './mycomponent.vue'//components:{mycomponent} 不需要注册直接使用&lt;/script&gt;&lt;template&gt; &nbsp;&lt;mycomponent /&gt;&lt;/template&gt;
3、组件通信:在<script setup>中必须使用 defineprops 和 defineemits api 来替代 props 和 emits
defineprops 和 defineemits具备完整的类型推断并且在 <script setup> 中是直接可用的(浏览了一下掘金，发现大部分文章demo还是通过import引入这2个api，这点官方文档写得很清楚)
defineprops 代替props接收父组件传递的数据（父组件向子组件传参）
父组件:
<template> <div>父组件</div> <child :title="msg" /></template><script setup>import {ref} from 'vue'import child from './child.vue'const msg = ref('父的值') //自动返回，在template直接解套使用</script>
子组件：
<template/> 中可以直接使用父组件传递的props （可省略props.）
<script-setup> 需要通过props.xx获取父组件传递过来的props
<template> <div>子组件</div> <div>父组件传递的值：{{title}}</div></template><script setup>//import {defineprops} from 'vue' 不需要引入//语法糖必须使用defineprops替代propsconst props = defineprops({ title: { type: string }});//script-setup 需要通过props.xx获取父组件传递过来的propsconsole.log(props.title) //父的值</script>
defineemit 代替emit子组件向父组件传递数据（子组件向外暴露数据）
子组件代码:
<template> <div>子组件</div> <button @click="toemits">子组件向外暴露数据</button></template><script setup>import {ref} from 'vue'const name = ref('我是子组件')//1、暴露内部数据const emits = defineemits(['childfn']);const toemits = () => { //2、触发父组件中暴露的childfn方法并携带数据 emits('childfn',name)}</script>
父组件代码:
<template> <div>父组件</div> <child @childfn='childfn' /> <p>接收子组件传递的数据{{childdata}} </p></template><script setup>import {ref} from 'vue'import child from './child.vue' const childdata = ref(null) const childfn=(e)=>{ consloe.log('子组件触发了父组件childfn，并传递了参数e') childdata=e.value} </script>
4.<script setup>需主动向父组件暴露子组件属性 ：defineexpose使用 <script setup> 的组件，父组件是无法通过ref 或者 $parent 获取到子组件的ref等响应数据，需要通过defineexpose 主动暴露
子组件代码：
<script setup>import { ref } from 'vue'const a = 1const b = ref(2)//主动暴露组件属性defineexpose({ a, b})</script>
父组件代码:
<template> <div>父组件</div> <child ref='childref' /> <button @click='getchilddata'>通过ref获取子组件的属性 </button></template><script setup>import {ref} from 'vue'import child from './child.vue'const childref= ref() //注册响应数据 const getchilddata =()=>{ //子组件接收暴露出来得值 console.log(childref.value.a) //1 console.log(childref.value.b) //2 响应式数据} </script>
5.语法糖其他功能useslots 和 useattrs （少用，由于大部分人是sfc模式开发，在<template/>通过<slot/>标签就可以渲染插槽）
如果需要在script-setup中使用 slots 和 attrs 需要用useslots 和 useattrs替代
需要引入：import { useslots ,useattrs } form 'vue'
在<template/>中通过 $slots 和 $attrs 来访问更方便（attrs用来获取父组件中非props的传递到子组件的参数/方法，attrs 用来获取父组件中非props的传递到子组件的参数/方法，attrs用来获取父组件中非props的传递到子组件的参数/方法，slots可以获取父组件中插槽传递的虚拟dom对象，在sfc模式应该用处不大，在jsx /tsx使用比较多）
父组件:
<template> <child msg="非porps传值子组件用attrs接收" > <!-- 匿名插槽 --> <span >默认插槽</span> <!-- 具名插槽 --> <template #title> <h2>具名插槽</h2> </template> <!-- 作用域插槽 --> <template #footer="{ scope }"> <footer>作用域插槽——姓名：{{ scope.name }}，年龄{{ scope.age }}</footer> </template> </child></template><script setup>// 引入子组件import child from './child.vue'</script>
子组件：
<template> <!-- 匿名插槽 --> <slot /> <!-- 具名插槽 --> <slot name="title" /> <!-- 作用域插槽 --> <slot name="footer" :scope="state" /> <!-- $attrs 用来获取父组件中非props的传递到子组件的参数 --> <p>{{ attrs.msg == $attrs.msg }}</p> <!--true 没想到有啥作用... --> <p>{{ slots == $slots }}</p></template> <script setup>import { useslots, useattrs, reactive, toref } from 'vue'const state = reactive({ name: '张三', age: '18'})const slots = useslots()console.log(slots.default()); //获取到默认插槽的虚拟dom对象console.log(slots.title()); //获取到具名title插槽的虚拟dom对象// console.log(slots.footer()); //报错 不知道为啥有插槽作用域的无法获取//useattrs() 用来获取父组件传递的过来的属性数据的（也就是非 props 的属性值）。const attrs = useattrs()</script>
useslots或许在jsx/tsx下更实用
想使用jsx语法在vite需要下载相关jsx的plugins才能识别jsx
useslots 可以获取父组件传递过来插槽的虚拟dom对象，可以用来渲染插槽内容
<script lang='jsx'>import { definecomponent, useslots } from "vue";export default definecomponent({ setup() { // 获取插槽数据 const slots = useslots(); // 渲染组件 return () => ( <div> {slots.default?slots.default():''} {slots.title?slots.title():''} </div> ); },});</script>
大部分人是sfc模式开发，在<template/>通过<slot/>标签就可以渲染插槽，这种jsx 的写法应该是很少人会使用的
6.在setup访问路由访问路由实例组件信息：route和router
setup 里不能访问 this，不能再直接访问 this.$router 或 this.$route。（getcurrentinstance可以替代this但不推荐）
推荐：使用useroute 函数和userouter函数替代this.$route 和 this.$router
<script setup>import { userouter, useroute } from 'vue-router' const route = useroute() const router = userouter() function pushwithquery(query) { router.push({ name: 'search', query: { ...route.query, }, }) } <script/>
导航守卫
仍然可以使用路由实例组件的导航守卫
import router from './router'router.beforeeach((to,from,next)=&gt;{})
也可以使用组合式api的导航守卫onbeforerouteleave, onbeforerouteupdate
<script setup>import { onbeforerouteleave, onbeforerouteupdate } from 'vue-router' // 与 beforerouteleave 相同，无法访问 `this` onbeforerouteleave((to, from) => { const answer = window.confirm( 'do you really want to leave? you have unsaved changes!' ) // 取消导航并停留在同一页面上 if (!answer) return false }) const userdata = ref() // 与 beforerouteupdate 相同，无法访问 `this` onbeforerouteupdate(async (to, from) => { //仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改 if (to.params.id !== from.params.id) { userdata.value = await fetchuser(to.params.id) } }) <script/>
组合式 api 守卫也可以用在任何由 `975b587bf85a482ea10b0a28848e78a4` 渲染的组件中，它们不必像组件内守卫那样直接用在路由组件上。
以上就是vue3怎么使用setup语法糖拒绝写return的详细内容。