Vue 进阶：深入解析 computed 和 watch 的核心区别

一、Vue 核心概念解析1.1 计算属性计算属性是基于它们的响应式依赖进行缓存的。只有在相关响应式依赖发生改变时它才会重新求值。它是自动执行的没有回调函数的概念。1.2 侦听器侦听器允许我们执行异步操作例如 API 调用并在数据变化时采取相应的行动。它提供回调函数由开发者主动调用。二、computed 与 watch 的核心区别2.1 缓存机制与性能computed 具有缓存机制。只要依赖的响应式数据没有发生改变computed 属性会立即返回之前的缓存结果。这对于昂贵的计算非常有利。watch 没有缓存。每次数据发生变化时watch 的回调函数都会被执行。如果回调函数中有重操作频繁触发可能导致性能下降。2.2 数据流向与定义方式computed 接收单个 getter 函数返回一个派生值。它更像是数据的转换器。watch 接收一个字符串方法名、一个表达式或一个选项对象。它通常用于监视单一数据点或深层变化。2.3 适用范围computed 适合监听一个数据的变化并计算出一个新的值。例如过滤列表、格式化日期。watch 适合在数据变化时执行异步操作或执行一组更复杂的操作。例如监听 userAge 变化后请求用户详情。三、决策流程图与选择指南3.1 使用场景选择我们可以通过以下流程图来决定何时使用 computed何时使用 watch。是否/需要副作用是否/简单值监听开始: 需要处理数据是否需要派生新值?选择 computed提供 getter 函数返回计算后的值是否需要异步或操作副作用?选择 watch配置回调函数处理数据变化选择 watch监听基本类型变化3.2 代码示例对比computed 示例computed: { fullName() { return firstName.value lastName.value; } }watch 示例watch: { firstName(newVal, oldVal) { console.log(First name changed from, oldVal, to, newVal); } }四、进阶深度侦听与立即执行4.1 watch 的深度选项watch 默认不监听对象内部属性的变化。要深度监听请使用deep: true。watch: { user: { handler(newVal) { console.log(User data deep changed:, newVal); }, deep: true } }4.2 watch 的立即执行选项默认情况下侦听器在挂载后才会触发。使用immediate: true在创建时立即执行回调。watch: { message: { handler(newVal) { console.log(Message:, newVal); }, immediate: true } }