# Composition API
Composition API 是這次 Vue 3 中一個相當大的新功能，開發將超出原有 Vue 的限制，提供更大的變化及運用。

## ✐ 特點介紹

- 可以自由撰寫邏輯順序
- 重 JS 基礎知識
- **全部整合進 setup 內**
- 高度彈性
- 方便引入外部函式庫
- 編譯後的程式碼更容易壓縮

<br>
<br>

## ✐ 撰寫注意
- Option 全部移除改為 setup(){ ... return{}}
- <font color="red">沒有 this</font> (會用到的機率非常低)
- 用 ESM 方式撰寫
`https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.0-beta.7/vue.esm-browser.min.js`

## ✐ 撰寫開始
1. `script` 標籤加上 `type="model"`
2. `import {} from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.0-beta.7/vue.esm-browser.min.js'` 載入esm-browser CDN

:::info
ESM 是具名匯入，所以需要寫出模組化匯入名稱，因此通常會是 import { ... } form './app.js' 的方式匯入)
:::
3. 6. `setup` 內會 **`return`** 一個物件（若資料要渲染畫面，需要定義一個變數，並且透過 return 回傳）

    // JS
    <script type="module">
        // 引入 ESM，script 的 type 記得改成 module
        import { createApp } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.0-beta.7/vue.esm-browser.min.js'
        // 用 ESM 就不用 Vue. 開頭
        const app = createApp({
            // Composition API 一定會有 setup
            setup() {
                const text = '卡斯伯棒棒';
                // 需要回傳值，才能在 HTML 使用
                return {
                    text
                }
            }
        });
        app.mount('#app'); // mount 生成元件
    </script>

:::success
data, methods, created, mounted 都屬於 Option API
在 Composition API 裡面全部使用 setup(){...return{}}
:::

## ✐ Composition API 的資料建構
資料的定義方法，一定要使用特定的方法來運作

#### ➷ <span class="bg-b">data</span> → ref, reactive 方法

##### 1. reactive :
- 限制**只能使用物件**（function、array都是 object）
- 標準的 **Proxy** 物件，在進行取值的時候，會有一個 **Handle**r 控制器用來追蹤，有反應時會進行回傳（所以如果直接覆蓋 Proxy 時，就會失去雙向綁定的特性）


<script type="module">
    // 引入 ref
    import { createApp, ref } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.0-beta.7/vue.esm-browser.min.js'
    const app = createApp({
        setup() {
            // 使用 ref() 進行雙向綁定
            const text = ref('卡斯伯棒棒');
            // 需要回傳值，才能在 HTML 使用
            return {
                text
            }
        }
    });
    app.mount('#app');
</script>

###### tags: `Vue3`
{%hackmd @unayojanni/H1Qq0uKkK %}