深入理解Vue3的computed和watch

前端 潘老师 3个月前 (12-04) 70 ℃ (0) 扫码查看

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

1. 简介

Vue 3作为一款现代JavaScript框架,在处理响应式数据方面引入了两个关键特性:computedwatch。这两者在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中,computedwatch都是用于处理响应式数据的强大工具,但它们在用法和适用场景上有一些重要的区别。

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

5.1 计算属性(computed)

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

5.2 侦听器(watch)

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

以上就是关于深入理解Vue3的computed和watch相关的全部内容,希望对你有帮助。欢迎持续关注潘子夜个人博客(www.panziye.com),学习愉快哦!


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/12086.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】