Vue计算属性（computed）的使用方法及使用场景总结

已于 2024-07-16 10:45:56 修改
阅读量1.3k 收藏 6
点赞数 6
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2024-07-16 09:46:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51080551/article/details/140456646
版权

计算属性是基于响应式数据的函数，并且会被缓存，直到相关的响应式数据发生变化。可以在 Vue 组件的 computed 选项中定义计算属性：

1. 定义计算属性

vue2写法

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};

vue3写法

import { ref, computed } from 'vue';

export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');
    
    const fullName = computed(() => {
      return firstName.value + ' ' + lastName.value;
    });
    
    return {
      firstName,
      lastName,
      fullName
    };
  }
};

2.访问计算属性

<template>
  <div>{{ fullName }}</div>
</template>

3.计算属性的使用场景

  • 计算和格式化数据

当需要对数据进行计算或格式化时，可以使用计算属性：

import { ref, computed } from 'vue';

export default {
  setup() {
    const price = ref(100);
    
    const formattedPrice = computed(() => {
      return `$${price.value.toFixed(2)}`;
    });
    
    return {
      price,
      formattedPrice
    };
  }
};
  • 基于现有数据生成新数据

计算属性可以用于从现有数据中派生出新的数据：

import { ref, computed } from 'vue';

export default {
  setup() {
    const tasks = ref([
      { title: 'Task 1', completed: true },
      { title: 'Task 2', completed: false }
    ]);
    
    const completedTasks = computed(() => {
      return tasks.value.filter(task => task.completed);
    });
    
    return {
      tasks,
      completedTasks
    };
  }
};
  • 数据变换

计算属性可以用于将原始数据转换为特定的视图模型：

import { ref, computed } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue 3');
    
    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('');
    });
    
    return {
      message,
      reversedMessage
    };
  }
};
  • 依赖多个数据源

计算属性可以依赖多个数据源，当任意一个数据源发生变化时，计算属性会重新计算：

import { ref, computed } from 'vue';

export default {
  setup() {
    const cartItems = ref([
      { price: 10, quantity: 2 },
      { price: 20, quantity: 1 }
    ]);

    //计算总价
    const totalPrice = computed(() => {
      return cartItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0);
    });
    
    return {
      cartItems,
      totalPrice
    };
  }
};

4.计算属性的特性

  • 缓存

计算属性的结果会被缓存，直到依赖的数据发生变化：

import { ref, computed } from 'vue';

export default {
  setup() {
    const someData = ref(1);
    
    const cachedValue = computed(() => {
      return someData.value + 1;
    });
    
    return {
      someData,
      cachedValue
    };
  }
};
  • 依赖追踪

计算属性会自动追踪其依赖的数据，当依赖的数据发生变化时，计算属性会重新计算：

import { ref, computed } from 'vue';

export default {
  setup() {
    const someData = ref(1);
    
    const someComputed = computed(() => {
      return someData.value + 1;
    });
    
    return {
      someData,
      someComputed
    };
  }
};

5.计算属性与方法、监听器的比较

  • 计算属性 vs 方法
  1. 缓存： 计算属性是基于其依赖进行缓存的，只在依赖发生变化时重新计算。方法每次调用都会执行。
  2. 语法： 计算属性更简洁，特别是在模板中使用时。
import { ref } from 'vue';

export default {
  setup() {
    const someData = ref(1);

    const someMethod = () => {
      return someData.value + 1;
    };
    
    return {
      someData,
      someMethod
    };
  }
};

import { ref, computed } from 'vue';

export default {
  setup() {
    const someData = ref(1);
    
    const someComputed = computed(() => {
      return someData.value + 1;
    });
    
    return {
      someData,
      someComputed
    };
  }
};

<!-- 使用方法 -->
<template>
  <div>{{ someMethod() }}</div>
</template>

<!-- 使用计算属性 -->
<template>
  <div>{{ someComputed }}</div>
</template>
  •  计算属性 vs 监听器
  1. 用途： 计算属性主要用于数据的派生和变换，而监听器主要用于在数据变化时执行异步或开销较大的操作。
  2. 代码结构： 使用计算属性时，逻辑更加清晰和简洁。
import { ref, watch } from 'vue';

export default {
  setup() {
    const someData = ref(1);

    watch(someData, (newValue, oldValue) => {
      console.log('someData changed from', oldValue, 'to', newValue);
      // 执行异步或开销较大的操作
    });

    return {
      someData
    };
  }
};

import { ref, computed } from 'vue';

export default {
  setup() {
    const someData = ref(1);
    
    const someComputed = computed(() => {
      return someData.value + 1;
    });
    
    return {
      someData,
      someComputed
    };
  }
};

6.总结

计算属性在 Vue.js 中是一个非常强大的工具，用于处理基于响应式数据的逻辑。通过缓存和依赖追踪，计算属性能够提高性能并简化代码结构。适当地使用计算属性，可以使代码更加清晰、简洁和高效。

7.使用案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 Computed Example in HTML</title>
    <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.prod.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <ul>
                <li v-for="product in cart" :key="product.id">
                    {{ product.name }} - {{ product.price }}
                </li>
            </ul>
            <p>Total Price: {{ totalPrice }}</p>
        </div>
    </div>

    <script>
        // 模拟 Vue 3 Composition API 的效果
        const cart = [
            { id: 1, name: 'Product A', price: 10 },
            { id: 2, name: 'Product B', price: 15 },
            { id: 3, name: 'Product C', price: 230 }
        ];

        const app = Vue.createApp({
            data () {
                return {
                    cart
                };
            },
            // 案例：计算购物车中商品总价
            computed: {
                totalPrice () {
                    return this.cart.reduce((total, product) => total + product.price, 0);
                }
            }
        });

        app.mount('#app');
    </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 Computed Example in HTML</title>
    <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.prod.js"></script>
</head>

<body>
    <div id="app">

        <div>
            <input v-model="searchTerm" placeholder="Search">
            <ul>
                <li v-for="item in filteredList" :key="item.id">
                    {{ item.name }}
                </li>
            </ul>
        </div>
    </div>

    <script>
        const { createApp, defineComponent, h, ref } = Vue;
        const list = [
            { id: 1, name: 'Item A' },
            { id: 2, name: 'Item B' },
            { id: 3, name: 'Another Item' },
            { id: 3, name: 'Another Item' },
            { id: 3, name: 'Another Item' },
        ];
        const searchTerm = ref('');
        const app = Vue.createApp({
            data () {
                return {
                    list
                };
            },
            computed: {
                filteredList () {
                    return list.filter(item => item.name.toLowerCase().includes(searchTerm.value.toLowerCase()));
                }
            }
        });

        app.mount('#app');
    </script>
</body>

</html>

程序员大剧院
关注
  • 6
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目中如何使用computed计算属性
梦蝶
07-03 3万+
文章目录computed:1、基本使用：1.1 应用场景：1.2 代码位置：1.3 值：2、复杂操作-结合data中数据：3、计算属性写法演变：3.1 计算属性的setter和getter：① 完整的计算属性写法：属性+方法② 计算属性一般只有get方法，是只读属性。所以一般写法为：③ 语法糖---简化写法：4、项目中实例： computed: 1、基本使用： 在computed中定义一个函数（看起来是一个函数，其实是一个属性），命名按照属性规范命名(一般为名词)。 1.1 应用场景： 当数据A的
Vue-计算属性的使用
weixin_56263402的博客
06-20 1万+
1.计算属性：首先它是一个属性，所以使用方式跟其他的属性没什么，就是定义的时候不同 2.定义计算属性：写法上是一个函数，这个函数的返回值就是
Vue.js计算机属性computed和methods方法详解
10-16
主要为大家详细介绍了Vue.js计算机属性computed和methods方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue 的 Computed 实现原理详解
最新发布
My_wife_QBL的博客
07-06 696
Computed 属性是 Vue 实例中的一个特殊属性，它允许开发者定义一个计算值，该值依赖于其他响应式数据。响应式：当依赖的数据发生变化时，computed 属性会自动重新计算。缓存：computed 属性会缓存计算结果，只有当依赖的数据发生变化时，才会重新计算。惰性求值：computed 属性在首次访问时才会进行计算，之后会根据依赖数据的变化情况决定是否重新计算。Vue 的 computed 属性通过依赖追踪和缓存策略，实现了响应式计算和性能优化。
Vue中的computed的用法
weixin_63456913的博客
05-09 702
computed又被称作，用于动态的根据某个值或某些值的变化，来产生对应的变化，computed具有缓存性，当无关值变化时，不会引起computed声明值的变化。产生一个新的变量并挂载到vue实例上去。一、computed简写形式当我们动态的去更改surname或name时，都会引起fullName的改变。
Vue - 计算属性
小海的博客
11-01 5万+
1.vue计算属性-computed 一个数据, 依赖另外一些数据计算而来的结果 场景: 一个变量的值, 需要用另外变量计算而得来 语法: computed: { "计算属性名" () { return "值" } } 注意1: 计算属性和data属性都是变量-不能重名. 用法和data相同 注意2: 函数内变量变化, 会自动重新计算结果返回 例子: 需求: 需求1: 求2个数的和显示到页面上 需求2: 字符串翻转 <template> &l
Vue中的计算属性
weixin_45045252的博客
06-22 756
一、计算属性：1.定义：要用的属性不存在，要通过已有的属性计算得来2.原理：底层借助了Object.defineproperty方法提供的getter和setter3.get什么时候调用 :初次读取fullName时所依赖的数据发生变化时4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调用方便5.备注： 1）.计算属性最终会出现在vm上，直接读取使用即可 2）.如果计算属性要被修改，那必须写set函数去响应修改 且set要引起计算时依赖的数据发生改变6.计算
第五节：Vue的计算属性使用
binggoling
09-07 843
文章目录前言系列文章目录，Vue学习目录，每一章都有代码例子说明一、什么是计算属性二、计算属性VS方法但是两个又有什么不同的地方，两者之间最大的区别就是：缓存。三、计算属性set和get总结 前言 本博客的内容很多都来自官网，现在只是把自己的一些理解写出来给大家一起讨论学习 Vue官网 系列文章目录，Vue学习目录，每一章都有代码例子说明 一、什么是计算属性 如果我们要把data这两个值拼接一起显示的时候，我之前的写法就是这个直接使用两个插值文本或者是表达式来实现效果 <h1>{{n
Vue.js之计算属性的使用
weixin_44827643的博客
07-13 1213
本文主要介绍Vue.js中计算属性的使用，同methods中方法的定义一致，两者使用的区别在于计算属性中的方法基于依赖的数据将结果存储起来，下次再调用时，除非数据有变，否则直接获取已存储的数据 。下面案例同时利用methods以及computed中定义的方法来实现字符串翻转的功能，以此展示二者的区别。 运行结果：由运行结果可以看出，当第二次执行computed中的方法时，在数据为变的情形下，方法不会再执行。而methods中的方法，只要调用，就会执行一遍。......
Vue computed计算属性的使用方法
08-29
Vue computed计算属性的使用方法 computed计算属性是Vue框架中的一种强大特性，它可以根据依赖关系自动计算并缓存结果，从而提高应用程序的性能。在本文中，我们将详细介绍Vue computed计算属性的使用方法，并与...
Vue computed 计算属性代码实例
10-15
计算属性是在 Vue 实例的 `computed` 对象中定义的属性。它们本质上是返回值的方法，但通常我们像访问普通属性一样去引用它们，而不是通过调用函数的方式。例如，在给定的代码示例中，`fullname` 就是一个计算属性...
Vue计算属性的使用
08-29
本篇文章主要介绍了Vue计算属性的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解Vue的computed(计算属性)使用实例之TodoList
08-29
在Vue中，`methods` 和 `computed` 都是用来处理数据和响应用户操作的，但它们在使用场景和工作原理上有所不同。 1. **methods** `methods` 属性主要用于定义可复用的函数，通常包含与用户交互相关的逻辑。例如，...
vue的计算属性的使用
sunshineboysy的博客
02-26 4951
vue中通过computed选项定义计算属性 计算属性 类似于 methods 选项中定义的函数 计算属性 会进行缓存，只在相关响应式依赖发生改变时它们才会重新求值。 函数 每次都会执行函数体进行计算。 案例实现：输入数学与英语分数，采用 methods 与 computed 分别计算出总得分 案例源码： <body> <div id="ap...
Vue中计算属性的使用
qq_41617901的博客
05-19 468
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>常用特性</title.
vue计算属性使用方法
小明的博客
11-24 1030
vue计算属性使用方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <h1>{{name}}</h1> <input type="text" v-model="name"&
vue computed正确使用方式
热门推荐
李刚的学习专栏
07-03 12万+
最近面试中，遇到一个小伙子，谈到了vue中的 computed 和 watch 区别，最后得到了一个让我瞠目结舌的答案，只用 watch，从不用 computed 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，所以，对于复杂逻辑，vue 提倡使用计算属性。需要特别说明：计算属性的 getter 函数是没有副作用 (side effec...
Vue计算属性的基本使用
Mr_xiaoxuboke的博客
05-23 495
<!-- ​ 现在有变量姓氏和名字，要得到完整的名字。 --> 代码如下 <div id="app"> <!-- Mastache语法 --> <h2>{{firstName+ " " + lastName}}</h2> <!-- 方法 --> <h2>{{getFullName()}}</h2> <!-- 计算属性 --&g
vue.js计算属性基本用法
细雨纷飞~~~
08-14 106
<!doctype html> <html> <head> <title>测试Vue.js</title> <meta charset = "utf-8"> </head> <body> <div id="app"> {{name}} <p v-html="content"&gt...
vue计算属性调用方法
08-16
Vue计算属性有两种调用方法： 1. 在模板中直接使用，不需要加括号，就像{{fullName}}这样。当计算属性只有getter时，可以简写为computed:{ fullName(){ return this.firstName + '-' + this.lastName } } [1] 2. 在Vue实例中使用，可以通过计算属性的get和set方法进行调用。get方法用于获取计算属性的值，set方法用于修改计算属性的值。例如，可以通过vm.fullName来获取计算属性的值，通过vm.fullName = 'new value'来修改计算属性的值。 [3] 所以，Vue计算属性的调用方法可以根据具体的使用场景来选择。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Vue基础之计算属性](https://blog.csdn.net/MoshMode/article/details/118738981)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [Vue-计算属性的使用](https://blog.csdn.net/weixin_56263402/article/details/118071458)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值