Vue `watch`与`watchEffect`的实现差异：深度遍历与依赖预先收集的底层策略 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue `watch` 与 `watchEffect`：响应式原理的两种实现

大家好，今天我们来深入探讨 Vue 中两个重要的响应式 API：watch 和 watchEffect。它们都可以用于监听响应式数据的变化并执行相应的回调函数，但它们的实现机制却有着显著的区别。理解这些差异，有助于我们更好地掌握 Vue 的响应式原理，并能根据不同的场景选择最合适的 API。

我们将从以下几个方面展开讲解：

基本用法回顾： 快速回顾 watch 和 watchEffect 的基本语法和应用场景。
依赖收集机制： 深入分析 watch 和 watchEffect 如何收集依赖，这是两者最核心的区别所在。
触发时机与回调执行： 比较两者在响应式数据变化时触发回调函数的时机和方式。
性能考量与最佳实践： 讨论在不同场景下选择 watch 还是 watchEffect 的性能影响和最佳实践。
源码分析： 通过简化版的源码，理解 watch 和 watchEffect 的底层实现逻辑。

1. 基本用法回顾

首先，我们快速回顾一下 watch 和 watchEffect 的基本用法。

watch

watch 用于监听一个或多个响应式数据的变化，并在数据发生变化时执行回调函数。它需要明确指定要监听的数据源，可以是单个响应式变量、表达式、函数等。

<template>
  <div>
    <input v-model="message">
    <p>Message: {{ message }}</p>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('');

    watch(
      () => message.value,
      (newValue, oldValue) => {
        console.log('Message changed:', newValue, oldValue);
      }
    );

    return {
      message
    };
  }
};
</script>

在这个例子中，watch 监听了 message.value 的变化，当输入框中的内容改变时，回调函数会被执行，并打印新的值和旧的值。

watchEffect

watchEffect 则更加简单，它会自动收集回调函数中使用的所有响应式依赖，并在这些依赖发生变化时重新执行回调函数。

<template>
  <div>
    <input v-model="message">
    <p>Message: {{ message }}</p>
    <p>Message Length: {{ messageLength }}</p>
  </div>
</template>

<script>
import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const message = ref('');
    const messageLength = ref(0);

    watchEffect(() => {
      messageLength.value = message.value.length;
      console.log('Message length updated:', messageLength.value);
    });

    return {
      message,
      messageLength
    };
  }
};
</script>

在这个例子中，watchEffect 会自动追踪 message.value 的变化，并更新 messageLength.value。当输入框中的内容改变时，回调函数会被重新执行，并更新 messageLength 的值。

2. 依赖收集机制：核心差异

watch 和 watchEffect 最大的区别在于依赖收集的方式。

watch：显式依赖声明

watch 需要开发者显式地指定要监听的依赖项。它可以监听单个 ref、reactive 对象中的属性，甚至是返回响应式值的函数。这意味着你需要明确知道哪些数据变化会影响到你的回调函数。

watch(
  () => state.count, // 显式指定监听 state.count
  (newValue, oldValue) => {
    console.log('Count changed:', newValue, oldValue);
  }
);

watchEffect：自动依赖追踪

watchEffect 则不需要显式声明依赖项。它会在首次执行回调函数时自动追踪所有用到的响应式依赖。这意味着你不需要手动维护依赖列表，Vue 会自动帮你完成。

watchEffect(() => {
  console.log('Count is:', state.count); // 自动追踪 state.count
  console.log('Message is:', message.value); // 自动追踪 message.value
});

依赖收集过程对比

特性	`watch`	`watchEffect`
依赖声明	显式指定，需要手动维护依赖列表	自动追踪，首次执行回调时自动收集依赖
灵活性	更灵活，可以监听复杂的表达式或函数	简单易用，适用于副作用函数
适用场景	需要精确控制依赖项的场景，例如性能优化	不需要关心具体依赖项的场景，例如状态同步
潜在问题	容易遗漏依赖项，导致回调函数没有按预期执行	可能会追踪到不必要的依赖项，导致不必要的更新

3. 触发时机与回调执行

watch 和 watchEffect 在触发时机和回调执行方面也有一些差异。

watch：惰性执行

默认情况下，watch 是惰性执行的，也就是说，它只会在监听的依赖项发生变化时才执行回调函数。你可以通过 immediate: true 选项来使其立即执行一次。

watch(
  () => state.count,
  (newValue, oldValue) => {
    console.log('Count changed:', newValue, oldValue);
  },
  { immediate: true } // 立即执行一次
);

watchEffect：立即执行

watchEffect 会立即执行一次回调函数，以便收集依赖。之后，当任何追踪到的依赖项发生变化时，回调函数都会被重新执行。

回调函数参数

watch 的回调函数会接收两个参数：newValue 和 oldValue，分别表示新的值和旧的值。watchEffect 的回调函数则只接收一个参数：onInvalidate，用于注册清理副作用的函数。

watchEffect((onInvalidate) => {
  // 注册清理函数
  onInvalidate(() => {
    // 清理副作用，例如取消请求、清除定时器等
  });

  // 执行副作用
  console.log('Effect executed');
});

停止监听

watch 和 watchEffect 都返回一个停止监听的函数。调用该函数可以停止监听依赖项的变化，并取消回调函数的执行。

const stopWatch = watch(
  () => state.count,
  (newValue, oldValue) => {
    console.log('Count changed:', newValue, oldValue);
  }
);

// 停止监听
stopWatch();

const stopEffect = watchEffect(() => {
  console.log('Effect executed');
});

// 停止监听
stopEffect();

4. 性能考量与最佳实践

选择 watch 还是 watchEffect，需要根据具体的应用场景进行权衡。

性能考量

依赖追踪开销： watchEffect 的自动依赖追踪可能会带来一定的性能开销，因为它需要在每次执行回调函数时重新收集依赖。如果回调函数中涉及大量的计算或 DOM 操作，可能会影响性能。
不必要的更新： watchEffect 可能会追踪到不必要的依赖项，导致不必要的更新。例如，如果回调函数中读取了一个只在特定条件下才会使用的响应式变量，那么即使这个变量没有发生变化，回调函数也会被重新执行。

最佳实践

需要精确控制依赖项的场景： 如果你需要精确控制依赖项，并且希望避免不必要的更新，那么应该选择 watch。例如，在性能敏感的场景中，可以使用 watch 来只监听真正需要监听的依赖项。
副作用函数： 如果你的回调函数是一个副作用函数，例如发送网络请求、更新 DOM 等，并且不需要关心具体的依赖项，那么可以选择 watchEffect。watchEffect 可以让你更方便地编写副作用函数，而无需手动维护依赖列表。
状态同步： watchEffect 非常适合用于状态同步的场景。例如，你可以使用 watchEffect 来将一个响应式变量的值同步到 localStorage 中。

示例：性能优化

假设我们需要监听一个复杂的对象 state 中的 count 属性，并在 count 发生变化时更新一个计算属性 result。如果使用 watchEffect，可能会追踪到 state 对象中的其他属性，导致不必要的更新。

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <p>Result: {{ result }}</p>
  </div>
</template>

<script>
import { reactive, computed, watchEffect } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      message: ''
    });

    const result = computed(() => {
      console.log('Result computed');
      return state.count * 2;
    });

    watchEffect(() => {
      console.log('State changed');
      result.value; // 触发计算属性的更新
    });

    return {
      state,
      result
    };
  }
};
</script>

在这个例子中，即使 state.message 发生变化，watchEffect 也会被触发，导致 result 计算属性被重新计算，这显然是不必要的。

为了优化性能，我们可以使用 watch 来只监听 state.count 的变化。

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <p>Result: {{ result }}</p>
  </div>
</template>

<script>
import { reactive, computed, watch } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      message: ''
    });

    const result = computed(() => {
      console.log('Result computed');
      return state.count * 2;
    });

    watch(
      () => state.count,
      () => {
        console.log('Count changed');
        result.value; // 触发计算属性的更新
      }
    );

    return {
      state,
      result
    };
  }
};
</script>

在这个例子中，只有当 state.count 发生变化时，watch 才会触发，从而避免了不必要的更新。

5. 源码分析

为了更深入地理解 watch 和 watchEffect 的实现机制，我们来看一下简化版的源码。

简化版 watch 实现

import { effect, track, trigger } from './reactive';

function watch(source, cb, options = {}) {
  let getter;
  if (typeof source === 'function') {
    getter = source;
  } else {
    getter = () => traverse(source); // 深度遍历 source，收集依赖
  }

  let oldValue;
  let newValue;

  const job = () => {
    newValue = effectFn();
    cb(newValue, oldValue);
    oldValue = newValue;
  };

  const effectFn = effect(getter, {
    lazy: true,
    scheduler: job
  });

  if (options.immediate) {
    job();
  } else {
    oldValue = effectFn(); // 首次执行，收集依赖
  }

  return () => {
    // 停止监听
  };
}

function traverse(value) {
  if (typeof value !== 'object' || value === null) {
    return value;
  }

  for (const key in value) {
    traverse(value[key]);
  }

  return value;
}

简化版 watchEffect 实现

import { effect } from './reactive';

function watchEffect(fn) {
  const effectFn = effect(fn, {
    scheduler: () => {
      effectFn(); // 重新执行 effectFn，触发依赖更新
    }
  });

  effectFn(); // 首次执行，收集依赖

  return () => {
    // 停止监听
  };
}

代码解释

effect：用于创建响应式 effect，它会追踪函数中使用的所有响应式依赖。
track：用于追踪依赖，将当前 effect 添加到依赖项的依赖列表中。
trigger：用于触发依赖，通知所有依赖于该值的 effect 重新执行。
getter：用于获取要监听的值。对于 watch，如果 source 是一个对象，则需要深度遍历该对象，以便收集所有依赖。
scheduler：用于控制 effect 的执行时机。对于 watch，使用 scheduler 来在依赖项发生变化时执行回调函数。对于 watchEffect，使用 scheduler 来重新执行 effectFn。
traverse：用于深度遍历对象，以便收集所有依赖。

核心差异体现

依赖收集： watch 在 source 是对象时，通过 traverse 函数进行深度遍历，收集依赖。而 watchEffect 则直接在 effect 函数中通过执行传入的 fn 来收集依赖。
回调触发： watch 通过 scheduler 在依赖变化后执行 job 函数，job 函数会执行回调 cb。watchEffect 通过 scheduler 重新执行 effectFn 本身，从而再次触发依赖收集和副作用执行。

总结

watch 和 watchEffect 都是 Vue 中重要的响应式 API，它们各有优缺点，适用于不同的场景。watch 提供了更精确的依赖控制，适用于性能敏感的场景。watchEffect 则更加简单易用，适用于副作用函数和状态同步的场景。通过理解它们的实现机制，我们可以更好地利用它们来构建高效、可维护的 Vue 应用。

深入理解，灵活应用

掌握 watch 和 watchEffect 的核心差异，有助于我们在实际开发中做出更明智的选择，优化应用性能，提升开发效率。记住，选择合适的 API 取决于具体的应用场景和需求。

更多IT精英技术系列讲座，到智猿学院

Vue watch 与 watchEffect：响应式原理的两种实现