Vue3 Composition API寫煩了，試試新語法糖吧—setup script

2021 年 8 月 25 日
筆記
前端

前言

Vue3發布近一年了，相信大家對Vue3的新特性，新語法都很熟悉了。那麼在使用Composition API的過程中，有沒有覺得整個過程比較繁瑣。比如你的模板里用到了大量的state和方法的時候，都需要在setUp()函數里一一return出去。這個過程就比較難受了。

setup script 語法糖

setup script 是vue3的一個新的語法糖，用起來特別簡單。只需要在script標籤中加上setup 關鍵字。


    <script setup>
        export default {
            ...
        }
    </script>

setup script 的作用

1. 子組件無需手動註冊

setup script語法自動註冊子組件，很容易理解。我們來對比一下Composition API和setup script 的寫法，一看便知。

Composition API語法：


    <template>
        <Child >我是子組件</Child>
    </template>

    <script>
        import Child from '@/components/child.vue'
        export default {
            components:{
                Child
            },
            setup(){

                return {

                }
            }
        }
    </script>

setup script 語法：


    <template>
         <Child >我是子組件</Child>
    </template>

    <script setup>
        // 組件只需要引入，不需要手動註冊
       import Child from '@/components/child.vue'
    </script>

看到這裡，相信聰明的大家都已經了解了setup script 的第一個作用了。

2. 不需要返回方法和屬性

寫一個簡單的點擊按鈕，數字加1的demo,來對比一下兩種寫法的不同。

Composition API提供的setup()生命周期，我們經常這樣來使用它：

    <template>
        <div>{{state.count}}</div>
        <button @click="handleClick">點我+1</button>
    </template>

    <script>
        export default {
            import { reactive,ref,watch } from 'vue';

            setup(){
                
                const state = reactive({
                    count:0;
                })

                const handleClick = () => {
                    state.count++
                }


                return {
                    state,

                    handleClick
                }
            }
        }
    </script>

setup script 語法：

    <template>
        <div>{{state.count}}</div>
        <button @click="handleClick">點我+1</button>
    </template>

    <script setup>
      import { reactive,ref,watch } from 'vue';

      const state = reactive({
           count:0;
      })

      const handleClick = () => {
          state.count++;
      }
    </script>

setup script 語法更加簡潔，屬性和方法不需要返回暴露出去，template模板中就可以直接使用。上面的demo程式碼量比較少，setup script 的作用直觀上並不凸出。等到業務比較複雜，申明的屬性和方法比較多的時候，setup script語法糖用起來就爽很多了。

3. 支援props、context API

使用Composition API的朋友都知道，setup()鉤子暴露了兩個屬性props,context。
那麼，肯定有人疑惑，如果不使用setup()鉤子了，我們怎麼獲取props和context？

我們先來看看props，context中是什麼？

props:

context:

其實，vue3已經給我們提供了這方面的API：useAttrs,useSlots, defineProps, defineEmits ，讓我們一起來看看它們的用法：

獲取context中的attrs, emit, expose, slots：


   <script setup>
        import { useAttrs,useSlots, defineExpose, defineEmits } from 'vue'
        export default {

             // 獲取attrs
            const attrs = useAttrs()
            console.log(attrs)

            // 獲取 emit
            const emit = defineEmits(['change', 'close'])
            emit('change', 'change事件的payload')
            emit('close', 'close事件的payload')

            // 獲取expose 
            const a = 1
            const b = 2
            defineExpose({
                a,
                b
            })

            // 獲取slots
            const slots = useSlots()
            console.log(slots)
        }
   </script>

獲取props：


    <script setup>
        // 接受父組件傳遞的props
        const props = defineProps({
            msg: String,
            name: String
            age: Number
        })

    </script>

總結

以上就是vue3新出的語法糖setup script的基本使用方法了，是不是很香呢？這個語法糖在2021年6月29日正式定稿了，有興趣的同學快去試試吧。

參考文章：

//github.com/vuejs/rfcs/pull/227#issuecomment-870105222

Tags: 前端