Vue3怎么使用setup语法糖拒绝写return

<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>//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>  console.log('script');//多次实例组件,只触发一次  export default {      setup() {          console.log('setupFn');//每次实例化组件都触发和script-setup标签一样      }  }  </script>

<script setup>import MyComponent from './MyComponent.vue'//components:{MyComponent}  不需要注册直接使用</script><template>  <MyComponent /></template>

<template>  <div>父组件</div>  <Child :title="msg" /></template><script setup>import {ref} from 'vue'import Child from './child.vue'const msg = ref('父的值')  //自动返回，在template直接解套使用</script>

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

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

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

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

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

<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)=>{})

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