Johnson Mao

Vue 3 Composition API

2021年8月9日

#Vue 3 Composition API

第四週作業展示，運用了 Vue Composition API 與 watch 功能，點擊圖片可察看成果

#前言

這裡將會記錄參加 六角學院 Vue 3 新手夏令營（活動已結束） 課程筆記 與 每日任務紀錄，第四周介紹如何使用 Composition API 與 watch 功能，並了解 Vue 2 與 Vue 3 的差異。

#課堂重點

#Option API

圖片取自六角學院 卡斯伯 的免費直播課程，展示 Option API 的程式邏輯

#Option API 與 Composition API 的差異

圖片取自六角學院 卡斯伯 的免費直播課程，展示 Composition 與 Option 的差別

#Composition API

圖片取自六角學院 卡斯伯 的免費直播課程，展示 Composition 的寫法

#Vue 的 this 指向

#複習 ESM

CDN 連結 https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.0-beta.7/vue.esm-browser.min.js

ESM 比較能依據自己需求來引入所需的功能

#Composition API 起手式

#通常都是使用 ESModule 來操作

不轉ESM也行，但在composition API使用ESM更符合模組化概念

複製成功！
<!-- HTML -->
<div id="app">
    {{ text }}
    <input type="text" v-model="text">
</div>
複製成功！
// 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');
</script>
圖片取自六角學院 卡斯伯 的免費直播課程，卡斯伯棒棒

#Composition API 裡雙向綁定，需要引入ref

複製成功！
<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>

#Composition API 使用函式

複製成功！
<script type="module">
    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() {
            const text = ref('卡斯伯棒棒');
            // 新增你需要的函式
            function getText() {
                console.log( text )
            }
            // 需要回傳值，才能在 HTML 使用
            return {
                text,
                getText,
            }
        }
    });
    app.mount('#app');
</script>

#Composition API 使用生命週期

#引入 onMounted

複製成功！
<script type="module">
    import { createApp, ref, onMounted } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.0-beta.7/vue.esm-browser.min.js'
    const app = createApp({
        setup() {
            const text = ref('卡斯伯棒棒');
            
            function getText() {
                console.log( text )
            }
            // 新增生命週期
            onMounted(()=>{
                getText()
            })
            // 需要回傳值，才能在 HTML 使用
            return {
                text,
                getText,
            }
        }
    });
    app.mount('#app');
</script>

#引入 computed

複製成功！
<script type="module">
    import { createApp, ref, onMounted, computed } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.0-beta.7/vue.esm-browser.min.js'
    const app = createApp({
        setup() {
            const num = ref(1);
            // 新增生命週期
            const doubleNum = computed(()=>{
                return num.value * 2
            })
            // 需要回傳值，才能在 HTML 使用
            return {
                num,
                doubleNum,
            }
        }
    });
    app.mount('#app');
</script>
圖片取自六角學院 卡斯伯 的免費直播課程，computed

#reative 與 ref 的差別

圖片取自六角學院 卡斯伯 的免費直播課程，ref & reative 的差別

#reative

#ref

#參考資料

回首頁