Day13 - composition API 初次见面哩贺

今天透过六角的 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>

今天记到这边，大家晚安，如果以上内容有理解错误的地方都希望能再协助纠正，感恩的心 (っಠ‿ಠ)っ