Vue Computed 和 Watch 的区别与运用场景

'# Vue Computed 和 Watch 的区别与运用场景

一、背景与问题

在 Vue 开发中，computed 和 watch 是两个核心的响应式编程工具。它们都基于 Vue 的响应式系统，但应用场景和实现机制存在本质差异。理解它们的原理和适用场景是构建高效、可维护的 Vue 应用的关键。

问题场景

假设我们需要实现一个动态计算的 UI 组件：用户输入一个数字，组件需要实时显示其平方值，并在数值超过 100 时触发警告。此时，computed 适合处理计算逻辑，而 watch 适合处理触发副作用（如警告提示）。

核心问题

• 为什么 computed 会缓存结果？
• watch 的立即执行和深度监听机制如何影响性能？
• 在什么场景下应选择 computed 而不是 watch？

二、基本原理

1. computed 的工作原理

computed 是基于响应式依赖的纯函数，其核心特性如下：

• 依赖追踪：Vue 会自动追踪 computed 依赖的数据变化
• 缓存机制：只有当依赖数据变化时才会重新计算
• 响应式更新：计算结果的变化会触发视图更新

// 依赖追踪机制示例
computed: {
  squareValue() {
    return this.number * this.number
  }
}

内部机制

Vue 使用 Dep（依赖收集器）和 Watcher 机制实现依赖追踪：

1. 创建 computed 时，Vue 会创建一个 Watcher 实例
2. 在渲染过程中，Vue 会自动将 computed 依赖的数据添加到 Dep 中
3. 当依赖数据变化时，Dep 会触发 Watcher 重新计算

2. watch 的工作原理

watch 是基于观察者模式的副作用触发器，其核心特性包括：

• 立即执行：可配置 immediate 选项触发初始执行
• 深度监听：可配置 deep 选项监听嵌套对象变化
• 异步执行：默认使用 nextTick 延迟执行副作用函数

// 深度监听示例
watch: {
  number: {
    deep: true,
    handler(newVal, oldVal) {
      console.log('Number changed from', oldVal, 'to', newVal)
    }
  }
}

内部机制

watch 通过以下流程实现监听：

1. 创建 Watcher 实例，绑定到目标数据
2. 在数据变化时，触发 notify 通知机制
3. 通过 queueWatcher 队列处理异步更新

三、环境准备

开发环境

• Vue 3（推荐使用 Composition API）
• Node.js 18+
• VS Code + Vue Devtools

项目结构示例

src/
├── components/
│   └── DynamicCalculator.vue
├── App.vue
└── main.js

四、核心实现

1. computed 的使用场景

示例：动态计算和缓存

<template>
  <div>
    <input v-model="number" type="number" />
    <p>平方值: {{ squareValue }}</p>
    <p v-if="squareValue > 100">警告：数值过大！</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const number = ref(0)
const squareValue = computed(() => {
  return number.value * number.value
})
</script>

关键代码解释：

• computed 会自动追踪 number 的变化
• 当 number 变化时，squareValue 会重新计算
• 由于缓存机制，相同值不会重复计算

性能分析

• 计算复杂度：O(1)（假设不包含外部API调用）
• 内存占用：仅存储计算结果

2. watch 的使用场景

示例：异步操作和副作用

<template>
  <div>
    <input v-model="number" type="number" />
    <p>平方值: {{ squareValue }}</p>
    <p v-if="squareValue > 100">警告：数值过大！</p>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

const number = ref(0)
const squareValue = computed(() => {
  return number.value * number.value
})

watch(
  () => squareValue.value,
  (newVal, oldVal) => {
    if (newVal > 100) {
      console.log('触发警告：数值过大')
      // 模拟异步请求
      setTimeout(() => {
        alert('数值已超过阈值')
      }, 1000)
    }
  },
  { deep: true, immediate: true }
)
</script>

关键代码解释：

• watch 监听 squareValue 的变化
• immediate: true 触发初始执行
• deep: true 深度监听嵌套对象变化
• 使用 setTimeout 模拟异步操作

性能分析

• 副作用执行频率：与数据变化频率一致
• 内存占用：无额外开销

3. computed 与 watch 的组合使用

示例：复杂业务场景

<template>
  <div>
    <input v-model="email" type="email" />
    <p>格式化邮箱: {{ formattedEmail }}</p>
    <p v-if="isInvalid">请输入有效邮箱</p>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

const email = ref('')
const isInvalid = ref(false)

// 计算属性：格式化邮箱
const formattedEmail = computed(() => {
  if (!email.value) return ''
  const [local, domain] = email.value.split('@')
  return `${local.toUpperCase()}@${domain}`
})

// watch 监听邮箱变化
watch(email, (newVal) => {
  isInvalid.value = !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[A-Z]{2,}$/i.test(newVal)
}, { immediate: true })
</script>

关键代码解释：

• computed 处理格式化逻辑，保证数据一致性
• watch 验证邮箱格式，触发表单校验
• immediate: true 立即执行校验逻辑

五、完整案例

项目需求

实现一个动态计算的汇率转换器：

• 输入金额和汇率，显示换算结果
• 当金额超过 1000 时触发预警
• 当汇率变化时，自动更新换算结果

完整代码示例

<template>
  <div>
    <h2>汇率转换器</h2>
    <div>
      <label>金额: </label>
      <input v-model="amount" type="number" />
    </div>
    <div>
      <label>汇率 (1 USD = ): </label>
      <input v-model="rate" type="number" />
    </div>
    <div>
      <p>换算结果: {{ convertedAmount }}</p>
      <p v-if="isWarning">⚠️ 警告：金额过大</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

// 响应式变量
const amount = ref(100)
const rate = ref(7.2)
const isWarning = ref(false)

// 计算属性：换算结果
const convertedAmount = computed(() => {
  return (amount.value * rate.value).toFixed(2)
})

// watch 监听金额变化
watch(
  () => amount.value,
  (newVal) => {
    isWarning.value = newVal > 1000
  },
  { immediate: true }
)

// watch 监听汇率变化
watch(
  () => rate.value,
  (newVal, oldVal) => {
    console.log(`汇率从 ${oldVal} 变为 ${newVal}`)
  },
  { immediate: true }
)
</script>

运行效果：

1. 输入金额和汇率后，换算结果自动更新
2. 当金额超过 1000 时显示警告
3. 汇率变化时会记录日志

六、源码解析

1. computed 的实现原理

function computed(fn) {
  const computed = new ComputedRefImpl(fn)
  return computed
}

• ComputedRefImpl 继承自 RefImpl
• 在 effect 中创建 Dep 依赖
• 通过 track 记录依赖关系
• 在 trigger 时重新计算

2. watch 的实现原理

function watch(source, callback, options = {}) {
  const watcher = new Watcher(source, callback, options)
  return watcher
}

• Watcher 继承自 Effect 的子类
• 支持 immediate 和 deep 选项
• 使用 queueWatcher 队列处理异步更新

七、进阶使用

1. 响应式对象的深度监听

const user = ref({
  name: 'Alice',
  address: {
    city: 'New York'
  }
})

watch(
  () => user.value.address,
  (newVal, oldVal) => {
    console.log('地址变化:', newVal, oldVal)
  },
  { deep: true }
)

2. 使用 ref 和 reactive 的组合

const form = reactive({
  email: '',
  password: ''
})

watch(
  () => form.email,
  (newVal) => {
    console.log('邮箱变化:', newVal)
  }
)

3. 响应式数组的监听

const items = ref([1, 2, 3])

watch(
  () => items.value,
  (newVal, oldVal) => {
    console.log('数组变化:', newVal.length)
  }
)

八、性能与工程实践

1. 性能优化策略

2. 异常处理

watch(
  () => someValue,
  (newVal, oldVal) => {
    try {
      // 可能抛出异常的代码
    } catch (e) {
      console.error('Watch error:', e)
    }
  }
)

3. 安全风险

• 直接修改数据：watch 中避免直接修改 this 或 ref 值
• 异步操作风险：使用 try/catch 捕获异常
• XSS 风险：避免直接拼接用户输入内容

九、常见问题与踩坑

1. 常见错误示例

// 错误：直接修改计算属性
computed: {
  fullName() {
    return this.firstName + this.lastName
  }
}
// 错误原因：直接修改了计算属性值

解决办法：通过 set 方法更新数据

// 正确方式
this.firstName = 'John'

2. 常见错误场景

3. 典型陷阱

• 计算属性的副作用：避免在 computed 中执行副作用操作
• watch 的立即执行：注意 immediate: true 的初始执行时机
• 响应式对象的引用：避免直接修改 reactive 对象的引用

十、最佳实践

1. 使用原则

2. 代码规范建议

• 使用 watchEffect 简化副作用逻辑
• 避免在 computed 中执行异步操作
• 对敏感数据进行校验后再触发 watch

3. 工程实践建议

• 使用 debounce 控制高频更新
• 使用 v-once 优化静态内容
• 使用 v-memo 缓存计算结果

十一、总结

computed 和 watch 是 Vue 响应式系统中两个核心工具，它们在原理和应用场景上有本质差异：

• computed 适用于纯函数计算，具有缓存和响应式更新特性
• watch 适用于触发副作用，支持异步操作和深度监听

在实际开发中，应根据具体需求选择合适的工具：

• 当需要实时计算并保持数据一致性时，使用 computed
• 当需要执行副作用或处理复杂逻辑时，使用 watch

通过深入理解两者的原理和使用场景，可以构建更高效、可维护的 Vue 应用。在处理复杂业务逻辑时，合理组合使用 computed 和 watch 是提升代码质量和性能的关键。