大家好，我是小佑@小佐https://blog.csdn.net/Smell_rookie，是一名页面仔工程师，我会不定时在CSDN更新我的博客，有兴趣的可以点个关注来逛逛我的主页。

作为一名前端程序员，说起Vue3相信大家都不会陌生，它是当下最火热的前端人员必备的框架。

虽然Vue3已经发布很长的一段时间了，但是真正使用在项目中确是比较少的，大家或许都还在尝鲜阶段，还不是特别熟悉新的写法，尤其是从Vue2的组件式API更改为Vue3的Composition API，刚开始尝鲜的小伙伴可能还在吐槽Vue3中声明的变量、方法都需要return才可以在template中使用的时候，Vue3又定稿了一项新的技术：script setup语法糖。

先总结一下

Q:为什么会出现script-setup语法糖?
A:为了让我们写Composition API代码更加的简洁

开始使用

/*不使用script-setup语法糖*/
<script>
import { defineComponent } from "vue"
export default defineComponent({
  name: 'app',
})
</script>
​
/*使用script-setup语法糖*/
<script setup>
</script>

引用组件的变更

/*原先*/
<template>
  <about />
</template>
<script>
import about from './about.vue'
import { defineComponent } from "vue"
export default defineComponent({
  name: 'home',
  components: { about }
})
</script>
​
/*用语法糖后*/
<template>
  <about />
</template>
<script>
<script setup>
  import about from './about.vue'
</script>

组件的引入使用已不再需要components注册才能使用了，直接引入就可以在tamplate使用了，U1S1，这个更改让代码看起来更舒服简介了一些

变量使用的变更

/*原先*/
<template>
  count:{{count}}
  num:{{num}}
  text:{{text}}
  <el-button @click="handleClick">点击</el-button>
</template>
​
<script>
import { reactive, toRefs, ref } from 'vue'
export default {
  name: '',
  setup() {
    /*这里我列举了三种声明变量的方式*/
    const count = ref(1)
    const num = 2
    const state = reactive({
      text: "小黄在测试"
    })
    function handleClick(){
      count.value++
    }
    /*不使用script-srtup语法糖需要导出需要在template使用的变量和方法*/
    return { count, num, ...toRefs(state),handleClick }
   }
 }
</script>
​
/*用语法糖后*/
<template>
  count:{{count}}
  num:{{num}}
  /*这里没有使用toRefs展开变量，所以需要state.text*/
  text:{{state.text}}
  <el-button @click="handleClick">点击</el-button>
</template>
​
<script setup>
  import { reactive, ref } from 'vue'
  const count = ref(1)
  const num = 2
  const state = reactive({
    text: "小黄在测试"
  })
  function handleClick(){
    count.value++
  }
</script

使用script setup语法糖后变量和方法已不再需要return出去才能被template使用了，减少了代码量，看起来更加的美观

props使用的变更

/*原先*/
/*子组件*/
<template>
  {{foo}}
</tamplate>
<script>
import {defineComponent} from 'vue'
export default defineComponent({
   name:'son',
   props:{
     foo:String
   }
}) 
</script>
​
/*父组件*/
<template>
  <About foo="我是小黄" />
</template>
<script>
import About from "../about/index.vue"
import {defineComponent} from 'vue'
export default defineComponent({
  name:'father',
  components:{About}
})
</script>
​
/*用语法糖后*/
/*子组件*/
<template>
  {{foo}}
</tamplate>
<script setup>
  import {defineProps} from 'vue'
  const props = defineProps({
    foo:String
  })
  console.log(props) // Proxy {foo: '我是小黄'}
</script>
/*父组件*/
<template>
  <About foo="我是小黄" />
</template>
<script setup>
  import About from "../about/index.vue"
</script>

通过 defineProps 指定当前props类型的同时，获得上下文的props对象
在script中需要props[key]引用，而template中可直接调用key
用法上差异不大…

emit使用的变更

/*原先*/
<template>
  <el-button @click="handleClick">点击</el-button>
</template>
<script>
export default{
  setup(){
    emit:['h-update','h-delete']
  }
}
</script>
​
/*用语法糖后*/
<template>
  <el-button @click="handleClick">点击</el-button>
</template>
<script setup>
import { defineEmits } from 'vue'
const emit = defineEmits(['h-update', 'h-delete'])
function handleClick(){
  emit('h-update')
  console.log(emit)
  //(event, ...args) => instance.emit(event, ...args)
}
</script>

slots、attrs使用的变更

<script setup>
import {useSlots,useAttrs} from 'vue'
const slots = useSlots()
const attrs = useAttrs()
console.log(slots)//可以获取组件的插槽
console.log(attrs)//可以获取组件的属性
</script>