首页教程软件教程正文

深入理解Vue3的computed和watch

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 969 浏览 4261 个字

摘要 :

文章目录 1. 简介 1.1 computed 1.2 watch 2. 计算属性（computed） 2.1 介绍 2.2 基本用法 2.3 自动类型推导与显式类型指定 2.4 示例与实际应用 3. 侦听器（watch……

文
章
目
录

1. 简介

1.1 computed
1.2 watch

2. 计算属性（computed）

2.1 介绍
2.2 基本用法
2.3 自动类型推导与显式类型指定
2.4 示例与实际应用

3. 侦听器（watch）

3.1 介绍
3.2 基本用法
3.3 WatchEffect的使用
3.4 深度侦听与性能注意事项
3.5 示例与实际应用

4. 比较与选择

4.1 对比计算属性与侦听器
4.2 最佳实践

5. 总结

5.1 计算属性（computed）
5.2 侦听器（watch）

本文主要讲解关于深入理解Vue3的computed和watch相关内容，让我们来一起学习下吧！

1. 简介

Vue 3作为一款现代JavaScript框架，在处理响应式数据方面引入了两个关键特性：computed和watch。这两者在Vue应用中扮演着不可或缺的角色，为开发者提供了有效管理和响应数据变化的工具。

1.1 computed

computed是一种声明式的数据计算方式，允许开发者根据依赖的数据动态生成派生值。它的设计目的是使代码更加清晰，同时能够自动缓存计算结果，避免不必要的重复计算。

1.2 watch

watch则提供了一种方式，让开发者监视响应式数据的变化并执行自定义的逻辑。这在需要执行副作用操作、处理异步任务或监听多个数据源变化的情况下非常有用。

2. 计算属性（computed）

2.1 介绍

在Vue 3中，计算属性是一种强大的特性，用于声明式地计算衍生数据。通过使用computed，我们可以将复杂的逻辑转化为简洁的、具有高可读性的代码，同时确保计算结果的缓存和更新机制。

2.2 基本用法

2.2.1 创建只读计算属性

import { ref, computed } from \'vue\';

const count = ref(0);

// 创建只读计算属性
const double = computed(() => count.value * 2);

console.log(double.value); // 计算属性的值

2.2.2 创建可写计算属性

import { ref, computed } from \'vue\';

const count = ref(1);

// 创建可写计算属性
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1;
  }
});

plusOne.value = 1; // 设置计算属性的值
console.log(count.value); // 0

2.3 自动类型推导与显式类型指定

Vue 3的computed函数可以根据计算函数的返回值自动推导类型。例如：

const double = computed(() => count.value * 2);
// 推导得到的类型：ComputedRef<number>

如果需要显式指定类型，可以使用泛型参数：

const double = computed<number>(() => count.value * 2);

2.4 示例与实际应用

通过实际场景演示computed的应用，包括处理复杂逻辑和依赖关系。例如，一个购物车中计算总价的计算属性。

import { ref, computed } from \'vue\';

const cartItems = ref([
  { id: 1, name: \'Product A\', price: 20, quantity: 2 },
  { id: 2, name: \'Product B\', price: 30, quantity: 1 },
]);

// 计算属性，计算购物车总价
const totalAmount = computed(() => {
  return cartItems.value.reduce((total, item) => total + item.price * item.quantity, 0);
});

console.log(totalAmount.value); // 购物车总价

3. 侦听器（watch）

3.1 介绍

在Vue 3中，watch是一项强大的特性，允许开发者在响应式数据发生变化时执行自定义逻辑。不同于计算属性，watch更适合处理具有副作用的操作，如异步请求、动画效果或其他需要在数据变化时触发的任务。

3.2 基本用法

3.2.1 创建单个数据源的侦听器

import { ref, watch } from \'vue\';

const count = ref(0);

// 创建单个数据源的侦听器
watch(count, (newVal, oldVal) => {
  console.log(`count变化：新值 - ${newVal}, 旧值 - ${oldVal}`);
});

3.2.2 创建多个数据源的侦听器

import { ref, watch } from \'vue\';

const count = ref(0);
const double = ref(0);

// 创建多个数据源的侦听器
watch([count, double], ([newCount, newDouble], [oldCount, oldDouble]) => {
  console.log(`count变化：新值 - ${newCount}, 旧值 - ${oldCount}`);
  console.log(`double变化：新值 - ${newDouble}, 旧值 - ${oldDouble}`);
});

3.3 WatchEffect的使用

Vue 3还引入了watchEffect，用于创建一个即时执行的侦听器，无需显式指定侦听的数据源。

import { ref, watchEffect } from \'vue\';

const count = ref(0);

// WatchEffect的使用
watchEffect(() => {
  console.log(`count的值：${count.value}`);
});

3.4 深度侦听与性能注意事项

在某些情况下，我们可能需要深度侦听一个对象。然而，深度侦听需要遍历整个对象，可能导致性能问题。因此，使用深度侦听时应当谨慎，确保在必要的情况下才使用。

import { reactive, watch } from \'vue\';

const state = reactive({
  user: {
    name: \'John\',
    age: 25,
  },
});

// 深度侦听
watch(() => state.user, (newVal, oldVal) => {
  console.log(\'user对象发生变化\');
}, { deep: true });

3.5 示例与实际应用

通过一个实际案例展示watch的应用场景，比如监听用户搜索关键词的变化并触发相关搜索操作。

import { ref, watch } from \'vue\';

const searchKeyword = ref(\'\');

// 创建搜索关键词的侦听器
watch(searchKeyword, (newVal, oldVal) => {
  console.log(`搜索关键词变化：新值 - ${newVal}, 旧值 - ${oldVal}`);
  // 执行相关搜索操作
  // ...
});

4. 比较与选择

4.1 对比计算属性与侦听器

在Vue 3中，computed和watch都是用于处理响应式数据的强大工具，但它们在用法和适用场景上有一些重要的区别。

4.1.1 computed的优势：

声明式计算： computed允许我们以声明式的方式计算派生值，提高代码的可读性和维护性。
自动缓存： 计算属性的值会根据其依赖自动缓存，只有在相关依赖变化时才会重新计算。

const double = computed(() => count.value * 2);

4.1.2 watch的优势：

副作用操作： watch适用于具有副作用的操作，例如异步请求、动画效果等，它提供了更灵活的方式处理响应式数据变化。
监听多个数据源： watch能够同时监听多个数据源的变化，执行相应的回调。

watch([count, double], ([newCount, newDouble], [oldCount, oldDouble]) => {
  console.log(`count变化：新值 - ${newCount}, 旧值 - ${oldCount}`);
  console.log(`double变化：新值 - ${newDouble}, 旧值 - ${oldDouble}`);
});

4.2 最佳实践

4.2.1 选择computed当：

需要派生新的数据值，而且这个值是基于其他响应式数据计算得来的。
希望自动缓存计算属性的值，以避免不必要的重复计算。

const totalAmount = computed(() => {
  return cartItems.value.reduce((total, item) => total + item.price * item.quantity, 0);
});

4.2.2 选择watch当：

需要在响应式数据变化时执行自定义逻辑，比如异步请求、动画效果等。
需要监听多个数据源的变化，并执行相应的回调。

watch([count, double], ([newCount, newDouble], [oldCount, oldDouble]) => {
  console.log(`count变化：新值 - ${newCount}, 旧值 - ${oldCount}`);
  console.log(`double变化：新值 - ${newDouble}, 旧值 - ${oldDouble}`);
});

5. 总结

在Vue 3中，computed和watch是两个关键的响应式特性，为开发者提供了强大的工具来处理数据的派生和变化。通过对比它们的使用方式和适用场景，我们可以更好地理解如何在项目中灵活运用这两个特性。

5.1 计算属性（computed）

优势：
- 声明式计算： 计算属性允许我们以声明式的方式计算派生值，提高代码的可读性和维护性。
- 自动缓存： 计算属性的值会根据其依赖自动缓存，只有在相关依赖变化时才会重新计算。
适用场景：
- 需要派生新的数据值，而且这个值是基于其他响应式数据计算得来的。
- 希望自动缓存计算属性的值，以避免不必要的重复计算。

5.2 侦听器（watch）

优势：
- 副作用操作： watch适用于具有副作用的操作，例如异步请求、动画效果等，提供了更灵活的方式处理响应式数据变化。
- 监听多个数据源： watch能够同时监听多个数据源的变化，执行相应的回调。
适用场景：
- 需要在响应式数据变化时执行自定义逻辑，比如异步请求、动画效果等。
- 需要监听多个数据源的变化，并执行相应的回调。