老师，麻烦检查一下代码，然后提交这里我直接调用函数也可以，为什么课程要用一个箭头函数包起来

来源：2-8 使用 Composition API 开发TodoList（2）

Elisha666

2022-06-27 18:51:30

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
   
    <script>
        // 将关于 list 操作的内容进行封装
        const listRelativeEffect = () => {
            const { reactive } = Vue;
            const list = reactive([]);

            // 添加列表项
            const addItemToList = (item) => {
                list.push(item);
            };
            // 删除列表项
            const removeItem = index => {
                list.splice(index, 1);
            };

            return {
                list,
                addItemToList,
                removeItem
            }
        };

        // 将关于 input 操作的内容进行封装
        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, removeItem } = listRelativeEffect();
                console.log(typeof removeItem);
                const { inputValue, handleInputValueChange } = inputRelativeEffect();
               
                return {
                    list, addItemToList,
                    inputValue, handleInputValueChange,
                    removeItem
                };
            },
            template: `
                <div>
                    <div>
                        <input :value="inputValue" @input="handleInputValueChange" />
                        <div>{{inputValue}}</div>
                        <button @click="addItemToList(inputValue);inputValue=''">提交</button>
                    </div>
                    <ul>
                        <li v-for="(item, index) in list" :key="index" @click="removeItem(index)">{{item}}</li>
                    </ul>
                </div>
            `
        });


        const vm = app.mount("#root");
    </script>
</body>
</html>