再也不怕面试官问watch、computed、watchEffect的区别了-51CTO.COM

在Vue中，数据响应式是一个核心概念，它使得当数据变化时，相关的视图会自动更新。为了更灵活地处理数据的变化，Vue提供了多种方式，其中包括watch、computed和watchEffect。

watch

watch是Vue中一个非常强大的特性，它允许你监听数据的变化并做出相应的反应。它有两种用法：一是监听一个具体的数据变化，二是监听多个数据的变化。

// 监听单个数据
watch('someData', (newVal, oldVal) => {
  // 做一些事情
});

// 监听多个数据
watch(['data1', 'data2'], ([newVal1, newVal2], [oldVal1, oldVal2]) => {
  // 做一些事情
});1.
2.
3.
4.
5.
6.
7.
8.
9.

watch的实现原理

Vue中watch的实现主要依赖于Watcher这个核心类。当调用watch时，实际上是创建了一个Watcher实例，并将回调函数和需要监听的数据传递给这个实例。

// 简化版的watch实现
function watch(source, cb) {
  const watcher = new Watcher(source, cb);
}1.
2.
3.
4.

Watcher类的构造函数接收两个参数，分别是需要监听的数据（可以是一个字符串，也可以是一个返回值的函数）和回调函数。在构造函数中，会对数据进行求值，然后将这个Watcher实例添加到数据的依赖列表中。

class Watcher {
  constructor(source, cb) {
    this.getter = typeof source === 'function' ? source : () => this.vm[source];
    this.cb = cb;
    this.value = this.get();
  }

  get() {
    pushTarget(this); // 将当前Watcher实例压栈
    const value = this.getter.call(this.vm); // 触发数据的getter，将当前Watcher实例添加到依赖列表中
    popTarget(); // 将当前Watcher实例出栈
    return value;
  }

  update() {
    const oldValue = this.value;
    this.value = this.get();
    this.cb(this.value, oldValue);
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

简单来说，watch的实现原理就是通过Watcher实例来监听数据的变化，当数据变化时，触发update方法执行回调函数。

computed

computed用于计算派生数据。它依赖于其他响应式数据，并且只有在相关数据发生变化时才会重新计算。

computed(() => {
  return someData * 2;
});1.
2.
3.

computed的实现原理

computed的实现原理相对于watch更为复杂，它依赖于getter和setter的机制。在Vue中，computed的定义是一个包含get和set方法的对象。

const computed = {
  get() {
    return someData * 2;
  },
  set(value) {
    someData = value / 2;
  }
};1.
2.
3.
4.
5.
6.
7.
8.

在computed的实现中，当访问计算属性时，实际上是执行了get方法，而在数据变化时，会执行set方法。这里主要使用了Object.defineProperty这个JavaScript的特性。

function createComputedGetter() {
  return function computedGetter() {
    const value = getter.call(this); // 执行计算属性的get方法
    track(target, TrackOpTypes.GET, 'value'); // 添加依赖
    return value;
  };
}

function createComputedSetter() {
  return function computedSetter(newValue) {
    setter.call(this, newValue); // 执行计算属性的set方法
    trigger(target, TriggerOpTypes.SET, 'value'); // 触发更新
  };
}

function computed(getterOrOptions) {
  const getter = 
    typeof getterOrOptions === 'function'
      ? getterOrOptions
      : getterOrOptions.get;

  const setter = getterOrOptions.set;

  const cRef = new ComputedRefImpl(
    getter,
    setter,
    isFunction(getterOrOptions) || !getterOrOptions.get
  );

  return cRef;
}

class ComputedRefImpl {
  // 构造函数
  constructor(getter, setter, isReadonly) {
    // ...
    this.effect = effect(getter, {
      lazy: true,
      scheduler: () => {
        if (!this._dirty) {
          this._dirty = true;
          triggerRef(this);
        }
      },
    });
  }
  // ...
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.

在上述代码中，createComputedGetter和createComputedSetter用于创建计算属性的getter和setter。computed函数接收一个getter函数，并通过Object.defineProperty将getter和setter添加到计算属性的引用对象中。

当计算属性被访问时，会触发getter，此时会将当前计算属性添加到依赖列表中。当计算属性的依赖数据发生变化时，会触发setter，并通过triggerRef触发计算属性的更新。

watchEffect

watchEffect是Vue 3新增的特性，它用于监听一个函数内部的响应式数据变化，当变化时，函数会被重新执行。

watchEffect(() => {
  // 依赖于响应式数据的操作
});1.
2.
3.

watchEffect的实现原理

watchEffect是Vue 3中引入的响应式API，它用于执行一个响应式函数，并在函数中响应式地追踪其依赖。与watch不同，watchEffect不需要显式地指定依赖，它会自动追踪函数内部的响应式数据，并在这些数据变化时触发函数重新执行。

以下是watchEffect的简单用法：

import { watchEffect, reactive } from 'vue';

const state = reactive({
  count: 0,
});

watchEffect(() => {
  console.log(state.count);
});1.
2.
3.
4.
5.
6.
7.
8.
9.

在这个例子中，watchEffect内部的函数会自动追踪state.count的变化，并在其变化时触发函数执行。

现在，让我们来探讨watchEffect的实现原理。

首先，watchEffect的核心是依赖追踪和触发。Vue 3中的响应式系统使用ReactiveEffect类来表示一个响应式的函数。

class ReactiveEffect {
  constructor(fn, scheduler = null) {
    // ...
    this.deps = [];
    this.scheduler = scheduler;
  }

  run() {
    // 执行响应式函数
    this.active && this.getter();
  }

  stop() {
    // 停止追踪
    cleanupEffect(this);
  }
}

export function watchEffect(effect, options = {}) {
  // 创建ReactiveEffect实例
  const runner = effect;
  const job = () => {
    if (!runner.active) {
      return;
    }
    if (cleanup) {
      cleanup();
    }
    // 执行响应式函数
    return runner.run();
  };
  // 执行响应式函数
  job();
  // 返回停止函数
  return () => {
    stop(runner);
  };
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.

在上述代码中，ReactiveEffect类表示一个响应式的函数。watchEffect函数接收一个响应式函数，并创建一个ReactiveEffect实例。在执行时，该实例会追踪函数内部的响应式数据，并在这些数据变化时触发函数重新执行。

watchEffect返回一个停止函数，用于停止对响应式数据的追踪。

实际开发当中该怎么去选择

watch

watch主要用于监听特定的数据变化并执行回调函数。它可以监听数据的变化，并在满足一定条件时执行相应的操作。常见的使用场景包括：

异步操作触发：当某个数据发生变化后，需要进行异步操作，比如发起一个网络请求或执行一段耗时的操作。

watch(() => state.data, async (newData, oldData) => {
  // 异步操作
  await fetchData(newData);
});1.
2.
3.
4.

深度监听：监听对象或数组的变化，并在深层次的数据变化时执行回调。

watch(() => state.user.address.city, (newCity, oldCity) => {
  console.log(`City changed from ${oldCity} to ${newCity}`);
});1.
2.
3.

computed

computed用于创建一个计算属性，它依赖于其他响应式数据，并且只有在依赖数据发生变化时才重新计算。常见的使用场景包括：

派生数据：根据现有的数据计算出一些派生的数据，而不必每次都重新计算。

const fullName = computed(() => `${state.firstName} ${state.lastName}`);1.

性能优化：避免不必要的重复计算，提高性能。

const result = computed(() => {
  // 避免重复计算
  if (someCondition) {
    return heavyCalculation();
  } else {
    return defaultResult;
  }
});1.
2.
3.
4.
5.
6.
7.
8.

watchEffect

watchEffect用于执行一个响应式函数，并在函数内部自动追踪依赖。它适用于不需要显式指定依赖，而是在函数内部自动追踪所有响应式数据变化的场景。常见的使用场景包括：

自动依赖追踪：函数内部的所有响应式数据都被自动追踪，无需显式指定。

watchEffect(() => {
  console.log(`Count changed to ${state.count}`);
});1.
2.
3.

动态数据处理：处理动态变化的数据，无需手动管理依赖。

watchEffect(() => {
  // 处理动态变化的数据
  handleDynamicData();
});1.
2.
3.
4.

总体而言，watch适用于需要有条件地监听数据变化的场景，computed适用于创建派生数据和性能优化，而watchEffect适用于自动追踪依赖的场景。在实际应用中，根据具体需求选择合适的API可以更好地发挥Vue的响应式能力。