解锁Vue 3的神秘力量：深入理解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)

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

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

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

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

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(() => {
  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能够同时监听多个数据源的变化，执行相应的回调。

• 适用场景：

  • 需要在响应式数据变化时执行自定义逻辑，比如异步请求、动画效果等。

  • 需要监听多个数据源的变化，并执行相应的回调。