08.watch

约 628 字大约 2 分钟

2026-03-01

面试题：watch 和 computed 的区别是什么？说一说各自的使用场景？

watch的使用

const count = ref('');
watch(count, async (newVal, oldVal)=>{})

watch(()=>{
  count...
}, (newVal, oldVal)=>{
  // ...
})

watch核心实现

import { effect, cleanup } from "./effect/effect.js";

// 遍历对象
function traverse(value, seen = new Set()) {
  // ...
}

/**
 * @param {*} source 
 * @param {*} cb 要执行的回调函数
 * @param {*} options 选项对象
 * @returns
 */
export function watch(source, cb, options = {}) {
  // 1. 参数归一化，统一成一个函数
  let getter;
  if(typeof source === 'function'){
    getter = source;
  } else {
    getter = () => traverse(source)
  }
  
  // 2. 保存新值和旧值
  let oldValue, newValue;
  
  const effectFn = effect(()=>getter(), {
    lazy: true,
    scheduler: ()=>{
      newValue = effectFn();
      cb(newValue, oldValue)
      oldValue = newValue
    }
  })
  
  oldValue = effectFn()
  
  return ()=>{
    cleanup(effectFn)
  }
}

面试题：watch 和 computed 的区别是什么？说一说各自的使用场景？
参考答案：
computed
作用：用于创建计算属性，依赖于 Vue 的响应式系统来做数据追踪。当依赖的数据发生变化时，会自动重新计算。
无副作用：计算属性内部的计算应当是没有副作用的，也就是说仅仅基于数据做二次计算。
缓存：计算属性具备缓存机制，如果响应式数据没变，每次获取计算属性时，内部直接返回的是上一次计算值。
用处：通常用于模板当中，以便在模板中显示二次计算后的结构。
同步：计算属性的一个核心特性是缓存，而这种缓存机制是基于同步计算的，假如允许异步计算，那么在异步操作完成之前，计算属性无法提供有效的返回值，这与它的缓存设计理念相违背。
watch
作用：用于监听数据的变化，可以监听一个或者多个数据，当数据发生改变时，执行一些用户指定的操作。
副作用：监听器中的回调函数可以执行副作用操作，例如发送网络请求、手动操作 DOM 等。
无缓存：监听器中的回调函数执行结果不会被缓存，也没办法缓存，因为不知道用户究竟要执行什么操作，有可能是包含副作用的操作，有可能是不包含副作用的操作。
用处：常用于响应式数据发生变化后，重新发送网络请求，或者修改 DOM 元素等场景。
支持异步：在监听到响应式数据发生变化后，可以进行同步或者异步的操作。

-EOF-