【九月打卡】第10天 使用 Composition API 开发 TodoList，computed 方法生成计算属性

课程名称：2022持续升级 Vue3 从入门到实战 掌握完整知识体系

课程章节：6-6 使用 Composition API 开发TodoList（1），6-7 使用 Composition API 开发TodoList（2），6-8 computed方法生成计算属性

主讲老师：Dell

课程内容：

今天学习的内容包括：使用 Composition API 开发 TodoList，computed 方法生成计算属性

今日知识点：
0. 非基础类型通过 reactive 来定义
1、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数;
2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是 $event

示例代码：
<script>
    // 关于 list 操作的内容进行了封装
    const listRelativeEffect = () => {
        const { reactive } = Vue;
        const list = reactive([]);
        const addItemToList = (item) => {
            list.push(item);
        }
        return { list, addItemToList }
    }

    // 关于 inputValue 操作的内容进行了封装
    const inputRelativeEffect = () => {
        const { ref } = Vue;
        const inputValue = ref('');
        const handleInputValueChange = (e) => {
            inputValue.value = e.target.value
        }
        return { inputValue, handleInputValueChange}
    }

    const app = Vue.createApp({
        setup() {
            // 流程调度中转
            const { list, addItemToList } = listRelativeEffect();
            const { inputValue, handleInputValueChange} = inputRelativeEffect();
            return {
                list, addItemToList,
                inputValue, handleInputValueChange
            }
        },
        template: `
            <div>
                <div>
                    <input :value="inputValue" @input="handleInputValueChange" />
                    <button @click="() => addItemToList(inputValue)">提交</button>
                </div>
                <ul>
                    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
                </ul>
            </div>
        `,
    });

    const vm = app.mount('#root');
</script>

示例代码2：
<script>
    // computed 计算属性
    const app = Vue.createApp({
        setup() {
            const { reactive, computed } = Vue;
            const countObj = reactive({ count: 0});
            const handleClick = () => {
                countObj.count += 1;
            }
            let countAddFive = computed({
                get: () => {
                    return countObj.count + 5;
                },
                set: (param) => {
                    countObj.count = param - 5;
                }
            })
      
            setTimeout(() => {
                countAddFive.value = 100;
            }, 3000)
      
            return { countObj, countAddFive, handleClick }
        },
        template: `
            <div>
                <span @click="handleClick">{{ countObj.count }}</span> -- {{ countAddFive }}
            </div>
        `,
    });
    
    const vm = app.mount('#root');
</script>

课程收获：

今天还是只学了三个小节，第六章还剩下五个待学习章节。忙里偷闲，明天尽力学完第六章。Vue 的 Composition API 还是很值得深入的，毕竟可以提高代码的可读性和可维护性。

今日课程学习时间大约花费 13 分钟。