Vue.js 3.0实战指南：轻松掌握Composition API计算属性和侦听器
2023-10-25 06:52:37
Composition API：掌控 Vue.js 3.0 状态管理的利器
Vue.js 3.0 横空出世，Composition API 作为其亮点新特性，为组件创建带来了革命性的变化。它赋予我们清晰组织和管理组件逻辑的强大能力。在 Composition API 的世界中，computed 和 watch 函数扮演着至关重要的角色，它们使我们能够创建计算属性、侦听状态变化，从而实现响应式的状态管理。
computed 计算属性：动态计算组件属性
computed 函数允许我们定义一个计算属性，其值是根据其他属性动态计算的。每当依赖的属性发生变化时，computed 属性也会自动更新。
代码示例：
const completedCount = computed(() => {
return todos.filter((todo) => todo.completed).length;
});
在这个示例中，我们定义了一个名为 completedCount 的计算属性，它计算已完成任务的数量。当 todos 数组中任务的完成状态发生变化时，completedCount 会自动更新。
watch 侦听器：时刻关注状态变化
watch 侦听器让我们能够在组件中监视状态变化，并在发生变化时执行回调函数。
代码示例：
watch(todos, () => {
// 响应 todos 数组的变化
console.log("Todos array has changed!");
});
在这个示例中，我们定义了一个侦听 todos 数组变化的 watch 侦听器。每当 todos 数组发生变化时，侦听器都会触发回调函数，更新组件中的 UI。
实战：TodoList 案例
为了更深入地理解 computed 和 watch 的应用，我们以一个 TodoList 案例为例。
步骤：
- 创建一个 Vue.js 3.0 项目。
- 安装 Vue.js 3.0 和 Composition API 。
- 创建一个 TodoList 组件。
- 在 TodoList 组件中定义计算属性 completedCount 。
- 在 TodoList 组件中定义 watch 侦听器 todoChanged 。
- 在 TodoList 组件中创建 UI。
- 运行项目并测试功能。
通过这个案例，你将亲身体验 computed 和 watch 的强大之处，并了解它们在实际项目中的应用。
总结
computed 和 watch 是 Vue.js 3.0 Composition API 中不可或缺的利器，它们简化了组件状态管理，实现了高效的响应式操作。通过掌握这些函数，你将能够创建更加强大、响应迅速的 Vue.js 应用程序。
常见问题解答
1. computed 和 watch 有什么区别？
- computed 用于计算属性，依赖于其他属性的值，当依赖属性变化时，computed 属性会自动更新。
- watch 用于侦听状态变化，当被监视的状态发生变化时，watch 会执行回调函数。
2. computed 属性是否始终保持最新？
- 是的，computed 属性始终保持最新，只要依赖的属性发生变化，computed 属性就会自动重新计算。
3. watch 侦听器可以监视任何状态吗？
- 是的，watch 侦听器可以监视任何响应式状态，包括组件数据、props 和 computed 属性。
4. 如何优化 computed 和 watch 的性能？
- 对于computed 属性，只有当依赖的属性发生变化时才重新计算。
- 对于watch 侦听器，可以使用深度比较函数来优化性能。
5. computed 和 watch 是 Vue.js 3.0 中的唯一状态管理工具吗？
- 不是，Vue.js 3.0 还提供了其他状态管理选项，例如 Pinia 和 Vuex 。
