今天透過六角的 Vue3 夏令營 Vue 3 Composition API 精髓掌握 初步認識 composition API

1. 以往的 data(){} 與 methods:{} 所定義的資料與函式，現在一家親的直接寫在 setup(){} 裡即可，但要記得 return 定義的資料與函式名稱，確保這些資料與函式能被畫面使用
2. 想要雙向綁定的資料需要透過 ref() 或 reactive({}) 設定

// 要記得設為 module
<script type="module">
import { createApp, ref } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.19/vue.esm-browser.min.js'
const app = createApp({
    // 用 setup 包住大家
    setup() {
        // 資料不用再寫在 data() 裡了
        // 建議都用 const 設定，確保資料不會被覆蓋
        const lunch = ref({});
        const mood = ref('');
        const mission = reactive({});
        
        // 函式也不用再寫在 methods 裡了
        function print(){};
        
        // 記得資料、函式都要 return，才能讓畫面使用
        return {
            lunch,
            mood,
            mission,
            print
        }
    }
})

app.mount('#app');
</script>

資料透過 ref() 或 reactive() 設定，但 reactive() 裡頭只能放 object type 的資料，使用上建議用 ref() 即可，而使用 ref() 綁定的資料，其資料內容存放在該資料 .value 屬性中

// 要記得設為 module
<script type="module">
import { createApp, ref } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.19/vue.esm-browser.min.js'
const app = createApp({
    // 用 setup 包住大家
    setup() {
        // 建議都用 const 設定，確保資料不會被覆蓋
        const lunch = ref({
            food: '燃麵',
            drink: '碧雪',
        });
        const mood = ref('chill');
        
        function print(){
            // 資料內容存放在該資料 `.value` 屬性中
            console.log(lunch.value.food);
            console.log(mood.value);
        };
        // 記得資料、函式都要 return，才能讓畫面使用
        return {
            lunch,
            mood,
            print
        }
    }
})

app.mount('#app');
</script>

今天記到這邊，大家晚安，如果以上內容有理解錯誤的地方都希望能再協助糾正，感恩的心 (っಠ‿ಠ)っ