vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue watch computed区别

前端vue面试总问watch和computed区别及建议总结

作者：千年老妖

在现代前端的面试中,vue和react是面试过程中基本必问的技术栈,其中Vue响应式话题,watch和computed是面试官非常喜欢聊的主题,虽然watch和computed它们都用于监听数据的变化,但它们在实现原理、使用场景和行为上有着显著的区别,本文将深入探讨,并提供一些面试过程中的建议

先了解下Vue 3响应式

Vue 3使用了Proxy作为其底层响应式实现可以监听对象属性的变化并触发相应的更新。当你访问数据时，Vue会建立一个依赖关系，然后在数据发生变化时通知相关的依赖项，从而更新视图。在这个背景下，我们深入探讨watch和computed的底层源码和使用上的区别。

Watch

watch选项允许你监听数据的变化并执行自定义的操作。它通常用于监视某个数据的变化并执行副作用，比如异步请求、打印日志或触发动画。当你创建一个watch属性时，Vue会建立一个响应式依赖关系，将该watch属性关联到你要监视的数据。当监视的数据发生变化时，Vue会通知相关的watch属性，触发其回调函数。这个回调函数会接收新值和旧值作为参数，你可以在其中执行所需的操作。

源码分析

相关文件：vue/src/runtime-core/apiWatch.ts和vue/src/reactivity/src/effect.ts。

在Vue 3的源码中，watch的实现主要依赖于createWatcher函数和Watcher类。

解读

1、在vue/src/runtime-core/apiWatch.ts中，watch函数负责创建Watcher实例，如下所示：

export function watch(
  source: WatchSource,
  cb: WatchCallback,
  options?: WatchOptions
): WatchStopHandle {
  // 创建一个watcher实例
  const watcher = new Watcher(vm, source, cb, {
    deep: options && options.deep,
    flush: options && options.flush,
    onTrack: options && options.onTrack,
    onTrigger: options && options.onTrigger,
  });
  // ...
}

这段代码创建了一个Watcher实例，其中vm是Vue实例，source是要监视的数据，cb是回调函数，以及其他选项。

2、Watcher的核心工作在vue/src/reactivity/src/effect.ts`中，其中包含了依赖项追踪和回调触发的逻辑。下面是一个简化的示例：

class Watcher {
  // ...
  get() {
    // 设置当前的watcher为活动watcher
    pushTarget(this);
    // 执行监视的数据，触发依赖项的收集
    const value = this.getter.call(this.vm, this.vm);
    // 恢复之前的watcher
    popTarget();
    return value;
  }
  update() {
    // 触发回调函数，通知数据变化
    this.run();
  }
  run() {
    // 执行回调函数
    const value = this.get();
    if (value !== this.value || isObject(value) || this.deep) {
      // 触发回调函数
      this.cb(value, this.value);
      this.value = value;
    }
  }
  // ...
}

这段代码展示了Watcher的关键部分，包括get方法用于获取数据和触发依赖项追踪，以及update和run方法用于触发回调函数。

watch使用

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Doubled Count: {{ doubledCount }}</p>
    <button @click="incrementCount">Increment Count</button>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
const count = ref(0);
const doubledCount = ref(0);
const incrementCount = () => {
  count.value++;
};
watch(count, (newVal, oldVal) => {
  // 监听 count 的变化
  doubledCount.value = newVal * 2;
});
</script>
</template>

在这个示例中，我们使用 <script setup> 来导入 ref 和 watch，并创建了 count 和 doubledCount 的响应式变量。然后，我们使用 watch 来监听 count 的变化，并在 count 变化时更新 doubledCount 的值。

Computed

computed的工作原理与watch 有一些差异。computed允许派生出一个新的计算属性，它依赖于其他响应式数据。当你定义一个computed属性时，Vue会建立一个依赖关系，将该计算属性关联到其依赖项。计算属性的值仅在其依赖项发生变化时重新计算，并且在多次访问时会返回缓存的结果。这可以减少不必要的计算，提高性能。

源码分析

在Vue 3的源码中，computed的实现主要依赖于createComputed函数和ComputedRefImpl类。相关部分位于vue/src/reactivity/src/computed.ts文件中。

解读

1、在vue/src/reactivity/src/computed.ts中，computed函数负责创建ComputedRefImpl实例，如下所示：

export function computed<T>(
  getter: ComputedGetter<T>,
  options?: ComputedOptions
): ComputedRef<T> {
  // 创建一个computed实例
  const c = new ComputedRefImpl(getter, options);
  // ...
  return c;
}

这段代码创建了一个ComputedRefImpl实例，其中getter是计算函数，options包含一些选项。

2、ComputedRefImpl的核心工作是负责追踪依赖项和缓存计算结果。下面是一个简化的示例：

class ComputedRefImpl<T> {
  // ...
  get value() {
    // 如果依赖项发生变化，或者值尚未计算
    if (this.dirty) {
      // 清除之前的依赖项
      cleanup(this);
      // 设置当前的computed属性为活动属性
      track(this);
      // 执行计算函数，获取新值
      this.value = this.effect();
      // 标记computed属性为已计算
      this.dirty = false;
      // 清理并设置新的依赖项
      stop(this);
    }
    // 返回缓存的值
    return this.value;
  }
  // ...
}

这段代码展示了ComputedRefImpl的核心工作流程：

这个缓存机制确保了computed属性的值只有在相关依赖项发生变化时才会重新计算，提高了性能并减少不必要的计算。

Computed使用

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Doubled Count: {{ doubledCount }}</p>
    <button @click="incrementCount">Increment Count</button>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue';
const count = ref(0);
const doubledCount = computed(() => {
  // 计算属性，依赖于 count
  return count.value * 2;
});
const incrementCount = () => {
  count.value++;
};
</script>
</template>

在这个示例中，我们同样使用 <script setup> 来导入 ref 和 computed，并创建了 count 和 doubledCount 的响应式变量。然后，我们使用 computed 来创建计算属性 doubledCount，该属性依赖于 count 的值。

区别与使用场景

上面我们介绍了二者之间的原理及使用方法，下面我们总结一下watch和computed之间的主要区别以及它们的使用场景。

区别

使用场景

面试建议

面试官常常会问有关watch和computed的问题，以了解你对Vue的响应式系统的理解。下面给一些小建议希望能对你有帮助：

以上就是前端vue面试总问watch和computed区别及建议总结的详细内容，更多关于vue watch computed区别的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文