Vue.js入门系列(三十五):`setup` 函数的注意点、计算属性、`watch` 与 `watchEffect` 的使用

个人名片
在这里插入图片描述
🎓作者简介:java领域优质创作者
🌐个人主页码农阿豪
📞工作室:新空间代码工作室(提供各种软件服务)
💌个人邮箱:[2435024119@qq.com]
📱个人微信:15279484656
🌐个人导航网站:www.forff.top
💡座右铭:总有人要赢。为什么不能是我呢?

  • 专栏导航:

码农阿豪系列专栏导航
面试专栏:收集了java相关高频面试题,面试实战总结🍻🎉🖥️
Spring5系列专栏:整理了Spring5重要知识点与实战演练,有案例可直接使用🚀🔧💻
Redis专栏:Redis从零到一学习分享,经验总结,案例实战💐📝💡
全栈系列专栏:海纳百川有容乃大,可能你想要的东西里面都有🤸🌱🚀

Vue.js入门系列(三十五):setup 函数的注意点、计算属性、watchwatchEffect 的使用

引言

在 Vue 3 中,组合式 API 提供了更灵活的状态管理和逻辑复用能力,其中 setup 函数是核心部分。我们不仅需要掌握 setup 的使用,还需要理解它的一些特殊注意点。与此同时,计算属性 (computed) 和监听器 (watch) 仍然是 Vue 3 中不可或缺的工具,它们在 Vue 3 中有了更灵活的应用方式。在本文中,我们将深入探讨 setup 的两个注意点、computed 的用法、以及 watchwatchEffect 的高级使用技巧。


一、setup 的两个注意点

setup 是 Vue 3 中最重要的组合式 API 之一。它用于初始化组件的逻辑和状态,返回的对象将直接暴露给模板。尽管使用非常灵活,但有两个重要的注意点需要掌握。

1.1 setup 中的生命周期

setup 函数是在组件实例创建之前调用的,因此我们无法在 setup 函数中直接访问 this 或组件实例相关的属性和方法。要使用生命周期钩子,我们需要通过 Vue 3 提供的组合式 API,例如 onMountedonUpdated 等。

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 生命周期钩子
    onMounted(() => {
      console.log('Component is mounted');
    });

    return { count };
  }
};

在这个例子中,onMounted 替代了 Vue 2 中的 mounted 钩子,用于在组件挂载后执行代码。

1.2 setup 的执行时机

setup 函数会在组件实例化时同步调用,它的返回值决定了组件的可用状态和方法。需要注意的是,setup 返回的数据和方法会直接暴露给模板,无需通过 this 访问。

export default {
  setup() {
    const message = ref('Hello, Vue 3!');
    return { message };
  }
};

在模板中:

<template>
  <div>{{ message }}</div>
</template>

通过这种方式,我们可以在模板中直接访问 setup 返回的数据和方法。


二、computed 计算属性

2.1 什么是 computed

computed 是一种基于其他状态派生出的状态。与普通的数据属性不同,计算属性具有缓存功能,只有当其依赖的响应式数据发生变化时,计算属性才会重新计算。

2.2 在 Vue 3 中使用 computed

在 Vue 3 中,我们通过 import { computed } 来创建计算属性。

import { ref, computed } from 'vue';

export default {
  setup() {
    const number1 = ref(5);
    const number2 = ref(10);

    const sum = computed(() => {
      return number1.value + number2.value;
    });

    return { number1, number2, sum };
  }
};

在这个例子中,sum 是一个计算属性,它根据 number1number2 的值动态计算结果。计算属性的好处在于,它会自动根据依赖的值进行缓存和更新。

2.3 计算属性的使用场景

计算属性常用于以下场景:

  • 依赖多个数据属性的派生状态。
  • 需要避免不必要的重新计算的场景,例如复杂的计算逻辑。
  • 用于格式化显示的数据,如日期格式化、价格计算等。

三、watch 监视器

3.1 什么是 watch

watch 是 Vue 提供的一个功能,用于监听响应式数据的变化,并执行特定的副作用操作。它常用于响应式数据发生变化时进行异步操作、数据验证等场景。

3.2 watch 监视 ref 定义的数据

在 Vue 3 中,watch 用于监视由 ref 定义的响应式数据。

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    return { count };
  }
};

在这个例子中,watch 会监视 count 的变化,当 count.value 发生变化时,watch 会触发并记录新的值和旧的值。

3.3 watch 监视 reactive 定义的数据

当使用 reactive 创建对象时,watch 也可以监视对象内部的属性变化。

import { reactive, watch } from 'vue';

export default {
  setup() {
    const state = reactive({ name: 'Alice', age: 25 });

    watch(() => state.age, (newAge, oldAge) => {
      console.log(`Age changed from ${oldAge} to ${newAge}`);
    });

    return { state };
  }
};

这里我们通过 watch 监视 state.age 的变化,而不是整个对象的变化。这种方式更加灵活,可以精确监控某个具体的属性。

3.4 watchvalue 的问题

当我们使用 watch 来监听 refreactive 对象时,需要注意对于 ref,我们监听的是 .value,而 reactive 对象则是直接监听其属性。

const myValue = ref(0);

watch(myValue, (newValue) => {
  console.log(newValue);  // 无需 .value,直接监听 myValue
});

对于 reactive 对象:

watch(() => reactiveObject.someProp, (newVal) => {
  console.log(newVal);
});

四、watchEffect 函数

4.1 什么是 watchEffect

watchEffect 是 Vue 3 新引入的一个函数,它会立即执行传入的副作用函数,并且在其中的响应式数据变化时自动重新执行。与 watch 不同的是,watchEffect 不需要手动指定依赖,它会自动追踪函数中的所有响应式数据。

4.2 使用 watchEffect
import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watchEffect(() => {
      console.log(`Count is now: ${count.value}`);
    });

    return { count };
  }
};

在这个例子中,watchEffect 会立即执行一次,并在 count.value 发生变化时再次执行。它非常适合用来追踪多个响应式数据的变化,而不需要显式声明依赖。

4.3 watchEffect 的特点
  • 自动依赖追踪:不需要手动声明依赖,Vue 会自动追踪函数中的所有响应式数据。
  • 立即执行watchEffect 会在初次调用时立即执行副作用函数。
  • 适合副作用操作:常用于需要基于多个响应式数据进行副作用操作的场景。

五、总结

通过本文的学习,你应该掌握了以下关键点:

  • setup 函数的注意点:理解了 setup 的生命周期限制和它的执行时机,掌握了在 setup 中使用生命周期钩子的方法。
  • computed 计算属性:学会了在 Vue 3 中使用 computed 来创建具有缓存功能的计算属性,避免不必要的重新计算。
  • watch 监视器:理解了如何通过 watch 监视 refreactive 定义的数据,并解决了监听值时遇到的问题。
  • watchEffect 函数:掌握了 watchEffect 的自动依赖追踪机制,适合处理自动追踪多个响应式数据的副作用操作。

这些知识为你开发 Vue 3 应用提供了更强大的工具,帮助你更好地管理和追踪状态变化。在接下来的博客中,我们将继续深入探讨 Vue 3 的更多高级特性和应用场景。如果你有任何疑问或需要进一步讨论,欢迎在评论区留言。感谢你的阅读,期待在下一篇博客中继续与大家分享更多 Vue.js 和 Vue 3 的开发技巧与经验!

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码农阿豪@新空间

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值