<script setup>
import { ref } from 'vue'// 给每个 todo 对象一个唯一的 id
let id = 0const newTodo = ref('')
const todos = ref([{ id: id++, text: 'Learn HTML' },{ id: id++, text: 'Learn JavaScript' },{ id: id++, text: 'Learn Vue' }
])function addTodo() {todos.value.push({ id: id++, text: newTodo.value })newTodo.value = ''
}function removeTodo(todo) {todos.value = todos.value.filter((t) => t !== todo)
}
</script><template><form @submit.prevent="addTodo"><input v-model="newTodo" required placeholder="new todo"><button>Add Todo</button></form><ul><li v-for="todo in todos" :key="todo.id">{{ todo.text }}<button @click="removeTodo(todo)">X</button></li></ul>
</template>官网给出了这么一段 其中addTodo和removeTodo他们修改数组的方式不同 所以写法也不同，addTodo使用的push直接修改的todos数组，用ref/reactive创建的数据可以监听数组变化自动更新所以不用写todos.value=todos.value.push({ id: id++, text: newTodo.value }),
但是在removeTodo里filter方法是重新生成了一个数组 并没有修改原数组 所以需要写 todos.value = todos.value.filter((t) => t !== todo)
