vue计算属性可自动统计未完成任务数：通过filter筛选completed为false的任务并返回长度，依赖todos及completed属性的响应式变化实时更新；模板中直接绑定{{unfinishedcount}}即可，支持防错处理确保健壮性。
Vue 计算属性通过响应式依赖自动更新，非常适合统计待办事项中未完成任务的数量——只要任务列表或任务状态变化，统计值就立即刷新，无需手动触发。
用 computed 定义实时未完成数
在 Vue 组件的 computed 选项中，直接基于 todos 数组过滤并返回长度：
- 过滤出
completed: false的任务项 - 返回过滤后数组的
length - Vue 会自动追踪
todos及其每个任务的completed属性变化
示例代码：
computed: {
unfinishedCount() {
return this.todos.filter(todo => !todo.completed).length;
}
}
确保数据结构支持响应式监听
未完成数能实时更新，前提是任务对象的 completed 属性是响应式的：
- 新增任务时，用
this.$set或 ES6 展开语法保证响应性（尤其在 Vue 2 中） - 避免直接给已有对象添加新属性（如
todo.isDone = true），应提前声明或使用Vue.set - Vue 3 中使用
ref或reactive声明的数据默认响应式，但仍需按规范修改嵌套属性
模板中直接使用，无需额外逻辑
在模板里像普通数据一样绑定即可，Vue 自动处理更新：
<h3>未完成任务：{{ unfinishedCount }} 项</h3>
当用户勾选/取消勾选复选框、添加新任务、或删除已完成任务时，unfinishedCount 会立刻重新计算并渲染。
可选：加一层防错处理提升健壮性
如果 todos 可能为 null 或 undefined，可在计算属性中做简单保护：
unfinishedCount() {
return Array.isArray(this.todos)
? this.todos.filter(todo => !todo.completed).length
: 0;
}
这样即使初始数据未加载完成，页面也不会报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
