Vue3新的script setup语法糖，拿来吧你！

拼搏现实的明天。 2022-08-30 14:57 157阅读 0赞

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

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

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

![在这里插入图片描述][3edd251acf8ec507299f8d00aab66bc2.png_pic_center]

先总结一下

> 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使用的变更 ##

![在这里插入图片描述][20210118110131603.png_pic_center]

[Link 1]: https://blog.csdn.net/Smell_rookie
[3edd251acf8ec507299f8d00aab66bc2.png_pic_center]: /images/20220829/3b75d63e2e0c418eb03d4ae2150e7396.png
[20210118110131603.png_pic_center]: /images/20220829/b9e80eddf5e140deb538177c5553e1a8.png