vue3中计算属性的用法以及使用场景

在 Vue 3 中,计算属性(computed properties)是一种基于依赖项动态计算并缓存的响应式数据。它与 Vue 2 中的计算属性类似,但在组合式 API 中使用 computed 函数来定义。计算属性的核心优势在于能够自动缓存计算结果,仅在依赖的数据发生变化时重新计算,避免了重复计算和性能浪费。

1. 计算属性的用法

基本用法

在组合式 API 中,可以通过 computed 函数创建计算属性。computed 接受一个回调函数作为参数,回调函数的返回值会成为计算属性的值。

复制代码
import { ref, computed } from 'vue';

const count = ref(1);
const doubleCount = computed(() => count.value * 2);

console.log(doubleCount.value); // 输出:2
count.value = 2;
console.log(doubleCount.value); // 输出:4
可写计算属性

计算属性默认是只读的,但也可以定义一个可写的计算属性,允许通过 set 函数改变其值。可写计算属性接受一个对象形式的参数,该对象包含 getset 函数。

复制代码
const count = ref(1);
const doubleCount = computed({
  get: () => count.value * 2,
  set: (newValue) => {
    count.value = newValue / 2;
  }
});

doubleCount.value = 10; // 触发 setter,count.value 会被设为 5
console.log(count.value); // 输出:5

2. 计算属性的使用场景

1. 数据依赖的逻辑处理
  • 计算属性常用于处理基于多个响应式数据的复杂计算逻辑。例如在电商购物车中,可以用计算属性计算商品的总价、折扣价格、优惠数量等。

    const cartItems = ref([
    { name: 'Product A', price: 100, quantity: 2 },
    { name: 'Product B', price: 50, quantity: 3 },
    ]);

    const totalPrice = computed(() =>
    cartItems.value.reduce((total, item) => total + item.price * item.quantity, 0)
    );

    console.log(totalPrice.value); // 输出:350

2. 表单中的动态显示数据
  • 计算属性在动态表单中也很常用。例如在用户填写信息时,显示实时计算的表单反馈(例如字数统计、动态预览等)。

    const firstName = ref('');
    const lastName = ref('');
    const fullName = computed(() => ${firstName.value} ${lastName.value});

    firstName.value = 'John';
    lastName.value = 'Doe';
    console.log(fullName.value); // 输出:'John Doe'

3. 条件和状态的控制
  • 计算属性可以用于处理复杂的状态和条件。例如在页面上根据多个条件计算出是否显示某个按钮、图标或提示。

    const isLoggedIn = ref(true);
    const hasAdminRights = ref(false);

    const canAccessSettings = computed(() => isLoggedIn.value && hasAdminRights.value);
    console.log(canAccessSettings.value); // 输出:false

4. 避免重复计算和优化性能
  • 计算属性可以缓存复杂的计算结果,避免在不必要的时候重新计算。例如,如果计算内容是一个大量数据的过滤或排序操作,使用计算属性可以减少性能开销。

3. 计算属性 vs. 方法 vs. 侦听器

  • 计算属性:具有缓存机制,只有当依赖的数据发生变化时才会重新计算,适用于数据依赖的动态展示。
  • 方法(methods):每次调用都会重新计算,因此不具备缓存特性。适用于不依赖数据的、仅在用户触发时才执行的逻辑。
  • 侦听器(watch):适用于监听数据变化并触发副作用,例如数据提交、API 请求等。

总结

计算属性在 Vue 3 中是一种强大的工具,特别适合用于基于响应式数据的逻辑计算、动态显示、条件控制等场景。相比其他方法,计算属性的缓存机制可以有效优化性能,是开发 Vue 应用时的核心工具。

相关推荐
不想上班只想要钱11 分钟前
vue3使用<el-date-picker分别设置开始时间和结束时间时,设置开始时间晚于当前时间,开始时间早于结束时间,结束时间晚于开始时间
前端·javascript
Li_Ning2141 分钟前
为什么 Vite 速度比 Webpack 快?
前端·webpack·node.js
2501_9153738841 分钟前
Electron 入门指南
前端·javascript·electron
同志327132 小时前
用HTML+CSS做了一个网易云音乐客户端首页
前端·css
小猪欧巴哟2 小时前
pnpm install 安装项目依赖遇到 illegal operation on a directory, symlink 问题
前端·vue.js
独角仙梦境2 小时前
🚀🚀🚀学习这个思路,你也能手撸自己的专属vip脚手架🚀🚀🚀
前端
CJWbiu2 小时前
Github Action + docker 实现自动化部署
前端·自动化运维
关山2 小时前
在TS中如何在子进程中动态实例化一个类
前端
吃瓜群众i2 小时前
兼容IE8浏览器的8个实用知识点
前端·javascript
前端烨2 小时前
vue3子传父——v-model辅助值传递
前端·vue3·组件传值