How does Vue3 use setup syntax sugar to refuse to write return

Vue3.2 setup语法糖

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖

解决Vue3.0中setup需要繁琐将声明的变量、函数以及 import 引入的内容通过return向外暴露,才能在<template/>使用的问题

1.<script setup>在<template/>使用

<script setup>中无需return 声明的变量、函数以及import引入的内容，即可在<template/>使用

<script setup>语法糖

<script setup>
//import引入的内容
import { getToday } from &#39;./utils&#39;  
// 变量
const msg = &#39;Hello!&#39;
// 函数
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 &#39;./utils&#39;  
export default{
 setup(){
    // 变量
    const msg = &#39;Hello!&#39;
    // 函数
    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(&#39;script&#39;);//多次实例组件,只触发一次
  export default {
      setup() {
          console.log(&#39;setupFn&#39;);//每次实例化组件都触发和script-setup标签一样
      }
  }
  </script>

（script-setup标签最终都会编译成setup() 函数的内容，每次实例化组件，就是实例化一次setup函数。script标签里面的setup函数也是一样每次实例化组件，就是实例化一次setup函数，但是script标签setup是需要写在export default{}内的，外的只是首次引入的时候执行一次）

2、<script setup>引入组件将自动注册

不需要在引入组件后，通过 components:{}注册组件，可直接使用

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

<template>
  <MyComponent />
</template>

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 &#39;vue&#39;
import Child from &#39;./child.vue&#39;
const msg = ref(&#39;父的值&#39;)  //自动返回，在template直接解套使用
</script>

子组件：

<template/> 中可以直接使用父组件传递的props （可省略props.）

<script-setup> 需要通过props.xx获取父组件传递过来的props

<template>
  <div>子组件</div>
  <div>父组件传递的值：{{title}}</div>
</template>

<script setup>
//import {defineProps} from &#39;vue&#39;   不需要引入

//语法糖必须使用defineProps替代props
const  props = defineProps({
  title: {
    type: String
  }
});
//script-setup 需要通过props.xx获取父组件传递过来的props
console.log(props.title) //父的值
</script>

defineEmit 代替emit

子组件向父组件传递数据（子组件向外暴露数据）

子组件代码:

<template>
  <div>子组件</div>
  <button @click="toEmits">子组件向外暴露数据</button>
</template>

<script setup>
import {ref} from &#39;vue&#39;
const name = ref(&#39;我是子组件&#39;)
//1、暴露内部数据
const  emits = defineEmits([&#39;childFn&#39;]);

const  toEmits = () => {
  //2、触发父组件中暴露的childFn方法并携带数据
  emits(&#39;childFn&#39;,name)
}
</script>

父组件代码:

<template>
  <div>父组件</div>
  <Child  @childFn=&#39;childFn&#39; />
  <p>接收子组件传递的数据{{childData}} </p>
</template>

<script setup>
import {ref} from &#39;vue&#39;
import Child from &#39;./child.vue&#39;
    
const childData = ref(null)    
const childFn=(e)=>{
    consloe.log(&#39;子组件触发了父组件childFn，并传递了参数e&#39;)
    childData=e.value
}    
       
</script>

4.<script setup>需主动向父组件暴露子组件属性 ：defineExpose

使用 <script setup> 的组件，父组件是无法通过ref 或者 $parent 获取到子组件的ref等响应数据，需要通过defineExpose 主动暴露

子组件代码：

<script setup>
import { ref } from &#39;vue&#39;

const a = 1
const b = ref(2)
//主动暴露组件属性
defineExpose({
  a,
  b
})
</script>

父组件代码:

<template>
  <div>父组件</div>
  <Child  ref=&#39;childRef&#39; />
  <button @click=&#39;getChildData&#39;>通过ref获取子组件的属性 </button>
</template>

<script setup>
import {ref} from &#39;vue&#39;
import Child from &#39;./child.vue&#39;
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 &#39;./child.vue&#39;
</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 &#39;vue&#39;
const state = reactive({
  name: &#39;张三&#39;,
  age: &#39;18&#39;
})

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=&#39;jsx&#39;>
import { defineComponent, useSlots } from "vue";
export default defineComponent({
  setup() {
    // 获取插槽数据
    const slots = useSlots();
    // 渲染组件
    return () => (
      <div>
        {slots.default?slots.default():&#39;&#39;}
        {slots.title?slots.title():&#39;&#39;}
      </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 &#39;vue-router&#39;
    const route = useRoute()
    const router = useRouter()
    
    function pushWithQuery(query) {
      router.push({
        name: &#39;search&#39;,
        query: {
          ...route.query,
        },
      })
    }
  <script/>

• 导航守卫

仍然可以使用路由实例组件的导航守卫

import router from './router'
router.beforeEach((to,from,next)=>{

})

也可以使用组合式api的导航守卫onBeforeRouteLeave, onBeforeRouteUpdate

<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from &#39;vue-router&#39;

    // 与 beforeRouteLeave 相同，无法访问 `this`
    onBeforeRouteLeave((to, from) => {
      const answer = window.confirm(
        &#39;Do you really want to leave? you have unsaved changes!&#39;
      )
      // 取消导航并停留在同一页面上
      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 守卫也可以用在任何由 `` 渲染的组件中，它们不必像组件内守卫那样直接用在路由组件上。

The above is the detailed content of How does Vue3 use setup syntax sugar to refuse to write return. For more information, please follow other related articles on the PHP Chinese website!