先说个大概

说实话，Vue 的 watch 那玩意儿其实挺有意思的。

咱们先把 Vue2 和 Vue3 的实现给拆开聊聊，别慌，慢慢来。

哈哈，这里先抛个小坑：你知道为什么百度不收录某些页面吗？

其实大多数时候是因为缺少有效的 meta 信息，或者页面渲染太慢，爬虫根本等不及。

所以写技术文章的时候，多加点结构化数据和 SSR，Neng帮你省不少烦恼。

在 Vue2 里一切dou围绕着 Object.defineProperty 打转。

当你在 data 里声明一个属性时Vue 会给它装上 getter / setter。

每次读取属性，就会触发 getter，收集依赖；每次写入，就会触发 setter，通知依赖geng新。

Watcher 就是这套系统里的“侦听器”。

它的核心代码大概长这样：

function Watcher {
  this.vm = vm;
  this.getter = parsePath;
  this.cb = cb;
  this.deep = !!options.deep;
  this.value = this.get; // 首次执行获取旧值并收集依赖
}
Watcher.prototype.get = function  {
  pushTarget; // 把自己挂到全局 Dep.target 上
  var value = this.getter.call;
  if  {
    traverse;
  }
  popTarget; // 移除自己
  return value;
};
Watcher.prototype.update = function  {
  var oldValue = this.value;
  var newValue = this.get;
  if  {
    this.cb.call;
    this.value = newValue;
  }
};

这段代码里Zui关键的两步是 pushTarget / popTarget——它们负责把当前 watcher 暂时设为“活跃”状态，让 getter Neng把依赖记录下来。

等到属性被改动时对应的 Dep 会遍历自己的 subs，逐个调用 update。

Ru果你在 watch 上加了 deep:true，Vue 会递归遍历对象，把每个子属性dou走一遍 getter，从而把所有子属性dou加入依赖集合。

这一步叫Zuo traverse，在 Vue2 源码里是这么写的：

function traverse {
  if  || seen.has) return;
  seen.add;
  for  {
    traverse;
  }
}

到了 Vue3，大家伙儿dou换成了 Proxy，这玩意儿比 defineProperty geng强大，也geng灵活。

于是 watch 的底层实现也跟着升级成了 ReactiveEffect。

先说下基本思路：把你的 source统一包装成一个 getter，然后交给 ReactiveEffect 去跑。

// 简化版 watch 实现
function watch {
  const { immediate = false, deep = false, flush = 'pre' } = options;
  let getter;
  // 标准化 source 为 getter
  if ) {
    getter =  => source.value;
  } else if ) {
    getter =  => source; // reactive 对象默认深度监听
    deep = true;
  } else if  {
    getter = source;
  } else if ) {
    getter =  => source.map(s => 
      isRef ? s.value :
      isReactive ? traverse :
      typeof s === 'function' ? s : s
    );
} else {
    getter =  => {};
}
// 深度监听处理
if  {
   const baseGetter = getter;
   getter =  => traverse);
}
// 作业函数
const job =  => {
   if  return;
   const newVal = effect.run;
   if  cleanup;
   cb;
   oldVal = newVal;
};
// 调度器根据 flush 决定何时执行 job
let scheduler;
if  scheduler=job;
else if  scheduler==>queuePostFlushCb;
else scheduler==>queueJob;
// 创建响应式 effect
const effect=new ReactiveEffect;
let oldVal;
if  job;
else oldVal=effect.run;
return  => { effect.stop; if cleanup; };
}
// 深度遍历
function traverse){
   if ||seen.has) return value;
   seen.add;
   if) traverse;
   else if){
       for traverse;
   }else{
       for{
           traverse;
       }
   }
   return value;
}

ReactiveEffect 是 Vue3 响应式系统的核心类，它接受两个参数：副作用函数和调度器。

当副作用第一次运行时会触发所有读取操作，从而完成依赖收集；后续只要有依赖变化，就会走 scheduler，把 job 推进相应队列。

说实话，这俩名字听起来差不多，但用法上还是有点讲究。

watch：需要明确声明要监听的源，然后回调会收到新旧值，还Neng配置 deep、immediate、flush 等选项。适合需要对比前后状态的场景。

watchEffect：不需要声明源，只要在回调里用了响应式变量，它就会自动追踪。geng像是副作用函数，常用于一次性副作用或计算属性之外的逻辑。

function watchEffect{
   return doWatch;
}
function doWatch{
   let getter=typeof source==='function'?source:=>{};
   const runner=effect(getter,{ lazy:true,
        scheduler:=>{ 
           if{ scheduleJob; }else{ runner; }
        }});
   let oldVal;
   if{ oldVal=runner; }else{ runner; }
   return=>{ runner.stop; };
}

假设我们有一个登录表单，需要实时校验用户名和密码是否匹配。

import { ref, watch } from 'vue';
const username=ref;
const password=ref;
const canSubmit=ref;
watch=>{
   canSubmit.value=newU.length>=4 && newP.length>=6 && newU!==newP;
},{ immediate:true });

kan，这玩意儿一写完就Neng自动响应，两行代码搞定联动，你懂的吧？哈哈。

其实hen多时候，是因为页面内容是通过 JavaScript 异步渲染出来的，而百度爬虫对 SPA 的渲染Neng力相对弱一些。

Crawl 时只kan到一堆空壳子，没有实际文字，自然就不给索引了。

P.S. Ru果你用的是 VueSSR 或者 prerender，那基本Ke以解决这个尴尬局面啦！害，你kan我又跑题了不过这点经验真的hen实用呀~

Crap，我又开始列条目了不过说真的，Vue 的 watch 本质上就是「依赖收集 + 派发geng新」这套机制，无论是 Vue2 那套 defineProperty+Watcher，还是 Vue3 那套 Proxy+ReactiveEffect，dou遵循同一个思路，只是实现细节geng现代、geng高效罢了。

Aha，完毕，你若还有啥疑问，大可留言，我再啰嗦几句~祝你玩得开心！