computed vs watch：响应式计算的最佳实践

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

const firstName = ref('Ada')
const lastName = ref('Lovelace')

// 计算属性
const fullName = computed(() => {
  console.log('computed 执行')
  return `${firstName.value} ${lastName.value}`
})
</script>

<template>
  <div>{{ fullName }}</div>
  <div>{{ fullName }}</div>
  <!-- computed 只执行一次,第二次直接用缓存 -->
</template>

const count = ref(0)
const double = computed(() => {
  console.log('计算')
  return count.value * 2
})

console.log(double.value) // 输出: 计算 0
console.log(double.value) // 直接用缓存,不输出
count.value++
console.log(double.value) // 输出: 计算 2

// ❌ 每次调用都执行
methods: {
  getDouble() {
    console.log('执行')
    return this.count * 2
  }
}

// 模板中每次渲染都会调用两次
<div>{{ getDouble() }}</div>
<div>{{ getDouble() }}</div>

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

const count = ref(0)

// 侦听单个值
watch(count, (newVal, oldVal) => {
  console.log(`count 从 ${oldVal} 变为 ${newVal}`)
})

// 侦听多个值
watch([count, anotherRef], ([newCount, newAnother], [oldCount, oldAnother]) => {
  console.log('count 或 anotherRef 变化了')
})

// 侦听对象属性
const user = reactive({ name: 'Ada', age: 18 })
watch(
  () => user.age,
  (newAge) => {
    console.log('age 变化:', newAge)
  }
)
</script>

watch(
  count,
  (val) => {
    console.log(val)
  },
  { immediate: true }
)
// 组件挂载时立即执行一次,输出当前值

const user = reactive({
  profile: {
    name: 'Ada',
  },
})

// ❌ 不会触发(只监听对象引用)
watch(user, () => {
  console.log('user 变化')
})
user.profile.name = 'Bob' // 不触发

// ✅ 深度监听
watch(
  user,
  () => {
    console.log('user 或其属性变化')
  },
  { deep: true }
)
user.profile.name = 'Bob' // 触发

const user = reactive({ name: 'Ada' })

// 自动深度监听,不需要 deep: true
watch(user, () => {
  console.log('user 属性变化')
})

watch(
  count,
  () => {
    // 访问更新后的 DOM
  },
  { flush: 'post' } // 在 DOM 更新后执行
)

// 默认 flush: 'pre',在 DOM 更新前执行

需要派生一个新的响应式值?
  ✅ 用 computed

需要执行异步操作/副作用?
  ✅ 用 watch

需要根据多个值计算结果,且在模板中使用?
  ✅ 用 computed

需要监听数据变化,触发API请求/操作DOM?
  ✅ 用 watch

// ✅ 推荐:computed
const filteredList = computed(() => {
  return list.value.filter((item) => item.active)
})

// ❌ 不推荐:watch(需要手动维护状态)
const filteredList = ref([])
watch(list, (newList) => {
  filteredList.value = newList.filter((item) => item.active)
})

// ✅ 推荐:watch(需要副作用)
import { debounce } from 'lodash-es'

const searchText = ref('')
const searchResults = ref([])

watch(
  searchText,
  debounce(async (text) => {
    searchResults.value = await api.search(text)
  }, 300)
)

// ❌ 不推荐:computed(不支持异步)

// ✅ 推荐:computed
const total = computed(() => {
  return cart.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
})

<script setup>
const firstName = ref('Ada')
const lastName = ref('Lovelace')

const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(value) {
    const [first, last] = value.split(' ')
    firstName.value = first
    lastName.value = last
  },
})

fullName.value = 'Grace Hopper' // 会更新 firstName 和 lastName
</script>

const count = ref(0)
const flag = ref(true)

const result = computed(() => {
  // 只有 flag 为 true 时,才依赖 count
  if (flag.value) {
    return count.value * 2
  }
  return 0
})

// flag = true 时,修改 count 会触发重新计算
count.value++ // 触发

// flag = false 时,修改 count 不会触发
flag.value = false
count.value++ // 不触发

import { ref, watchEffect } from 'vue'

const count = ref(0)
const double = ref(0)

// 不需要显式指定依赖
watchEffect(() => {
  double.value = count.value * 2
  console.log('count 或 double 变化')
})

// 等价于
watch(
  [count, double],
  () => {
    double.value = count.value * 2
    console.log('count 或 double 变化')
  },
  { immediate: true }
)

const stop = watch(count, () => {
  console.log('count 变化')
})

// 手动停止
stop()

watch(searchText, async (newText, oldText, onCleanup) => {
  let cancelled = false

  // 注册清理函数
  onCleanup(() => {
    cancelled = true
  })

  const result = await api.search(newText)

  // 如果已经被新的 watch 清理,不更新结果
  if (!cancelled) {
    searchResults.value = result
  }
})

// ❌ 性能差:每次渲染都计算
<template>
  <div>{{ list.filter(item => item.active).length }}</div>
  <div>{{ list.filter(item => item.active)[0] }}</div>
  <!-- filter 执行了两次 -->
</template>

// ✅ 性能好:只计算一次
<script setup>
const activeList = computed(() => list.value.filter(item => item.active))
</script>

<template>
  <div>{{ activeList.length }}</div>
  <div>{{ activeList[0] }}</div>
</template>

const bigObject = reactive({
  level1: {
    level2: {
      level3: {
        value: 1,
      },
    },
  },
})

// ❌ 性能差:遍历整个对象
watch(bigObject, () => {}, { deep: true })

// ✅ 性能好:只监听需要的属性
watch(
  () => bigObject.level1.level2.level3.value,
  () => {}
)

// ❌ 副作用应该用 watch
const fullName = computed(() => {
  logCount.value++ // 不要这样!
  return `${firstName.value} ${lastName.value}`
})

// ✅ 正确
watch([firstName, lastName], () => {
  logCount.value++
})

const count = ref(0)
const double = computed(() => count.value * 2)

// ❌ 不推荐(多一层包装)
watch(double, (val) => {
  console.log(val)
})

// ✅ 推荐(直接 watch 原始值)
watch(count, (val) => {
  console.log(val * 2)
})

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

watch(list, (newList, oldList) => {
  console.log(newList === oldList) // true!
  // 因为数组是引用类型,newList 和 oldList 指向同一个对象
})

// 解决:deep watch 或 手动拷贝
watch(
  () => [...list.value],
  (newList, oldList) => {
    console.log(newList === oldList) // false
  }
)