重要语法和方法总结
1. 组合式 API
在 <script setup> 中使用组合式 API 组织代码，按逻辑关注点将相关代码放在一起，如 ref 创建响应式数据，computed 创建计算属性。
2. 响应式数据
ref：用于创建基本类型的响应式数据，访问和修改时需要使用.value属性，如newTodo和todos。
const newTodo = ref('');
const todos = ref([...]);
3. 计算属性
computed 用于创建依赖其他响应式数据的计算属性，当依赖数据变化时自动更新，如 remaining。
const remaining = computed(() => {
return todos.value.filter(todo => !todo.completed).length;
});
4. 事件处理
使用 @ 指令绑定事件，如 @click、@keyup.enter。
<button @click="addTodo">添加</button>
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入新的待办事项">
5. 双向数据绑定
使用 v-model 实现表单元素和响应式数据的双向绑定，如输入框和 newTodo 之间的绑定。
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入新的待办事项">
6. 列表渲染
使用 v-for 指令渲染列表，通过 :key 为每个列表项提供唯一标识。
<li v-for="(todo, index) in todos" :key="index">
...
</li>
7. 条件渲染
使用 v-if、v-else 等指令进行条件渲染，本案例中通过 :style 结合条件判断实现文本样式的切换。
<span :style="{ textDecoration: todo.completed ? 'line-through' : 'none' }">
{{ todo.text }}
</span>
通过这个案例，你可以复习 Vue 3 中多个重要的语法和方法，加深对这些知识点的理解和掌握。
