代码运行报错，也不知道哪里出问题了

老师你好，这里我代码我和视频里面都一样了，就是运行起来出错，麻烦帮我看看哪里出问题了？
运行报错描述：Uncaught SyntaxError: Unexpected end of input
图片描述
代码

<!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>lesson 38</title>
    <script src="http://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    // 关于list操作的内容进行了封装
    const listRelativeEffect = () => {
        const { reactive } = Vue;
        const list = reactive([]);
        const addItemToList = (item) => {
            list.push(item);
        return { list, addItemToList, }
    }

    const app = Vue.createApp({
        setup() {
            const { ref } = Vue;
            const inputValue = ref('123');
            const handleInputValueChange = (e) => {
                inputValue.value = e.target.value
            }
            return {
                list,
                inputValue,
                handleInputValueChange,
                handleSubmit
            }
        },
        template: `
            <div>
                <div>
                    <input :value="inputValue" @input="handleInputValueChange" />
                    <button @click="handleSubmit">提交</button>
                </div>
                <ul>
                    <li v-for="(item, index) in list" :key="index">{{item}}</li>
                </ul>
            </div>
        `,
    });

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

</html>

慕越秀工地 2022-11-29

源自：vue基础入门（下） 2-7 使用 Composition API 开发TodoList（1）

收起

1回答

好帮手慕久久回答被采纳获得+3积分 2022-11-30 09:46:18

同学你好，如下方法缺少闭合的 } ,因此代码报错了：

修改如下：

修改后，代码依旧报错：

建议同学对照源码，仔细检查如下代码：

祝学习愉快！

收起回答

慕越秀工地提问者 #1

视频代码
我的代码
按照老师的提示，我已经补上那个括号的闭环了，vscode里面也已经没有红色波浪线语法报错了，但运行起来也是说list未定义
按照老师的说法，list和handleSubmit在setup中未定义不能直接使用，那为啥我的代码已经和视频一样了，怎么视频里面老师的运行起来没问题，我的却list未定义呢？我这里学的是使用CompositionAPI开发ToDoList的上集，还没看到下集，我也对照了下源码，没看太懂老师说的哪里定义list和handleSubmit

2022-11-30 13:19:57
好帮手慕久久回复提问者慕越秀工地 #2

解答如下：
1、上集中，9分钟左右的时候，老师改了代码的书写方式，然后没有运行代码，所以没有复现list报错这个问题。出现list报错才是正常的，需要继续看下集。
2、下集中，调整了代码，即补全了list相关内容：
同学的代码没有上述内容，可以再仔细对比一下。然后把下集看了，不然代码跑不起来。
源码在如下位置下载：

2022-11-30 13:52:25
慕越秀工地提问者回复好帮手慕久久 #3

慕欧老师好，我刚把下集看了，也跟着视频敲了出来，我大致了解是怎么回事了。
讲到下集我才明白这节课讲的核心重点，把list和inputValue分开进行了封装，而setup函数只是用来中转调度，仅仅只用来解构调用，所以不用所有定义都全部堆在setup函数里面搞到一坨一坨了，这样代码看起来就清晰而且维护性高。

老师我有一些问题想咨询，我现在vue基础视频课是二刷到这里了，视频里的代码我看是能看得懂的，但我还是不看视频是无法敲出来的，我是需要继续刷vue基础课上中下，还是直接去跟敲后面的仿京东呢？老师能够给点学习建议呢，我是希望尽快上岗的，去面试那种最初级的前端开发岗位，薪资无要求，无薪实习我都愿意。我研究生学历

2022-11-30 14:30:40