Vue笔记三——计算属性(computed)

最新推荐文章于 2024-06-11 08:00:00 发布
最新推荐文章于 2024-06-11 08:00:00 发布
阅读量467 收藏 2
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46351593/article/details/112071922
版权

文章目录

计算属性

什么是计算属性？

  • 我们知道，在模板中可以直接通过插值语法显示一些data中的数据。
  • 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示
    • 比如我们又firstName和lastName两个变量，我们需要显示完整的名称。
    • 但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}}{{lastName}}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-计算属性的基本使用</title>
</head>

<body>
    <div id="app">
        <h2>{{firstName + ' ' + lastName}}</h2>
        <h2>{{firstName}} {{lastName}}</h2>
        <h2>{{getFullName()}}</h2>

    </div>

    <script src="../js/vue.js"></script>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName: 'Lebron',
                lastName: 'James'
            },
            methods: {
                getFullName() {
                    return this.firstName + ' ' + this.lastName;
                }
            }
        })
    </script>
</body>

</html>
  • 我们可以将上面的代码换成计算属性：
    • OK，我们发现计算属性是写在实例computed选项中的。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-计算属性的基本使用</title>
</head>

<body>
    <div id="app">
        <h2>{{firstName + ' ' + lastName}}</h2>
        <h2>{{firstName}} {{lastName}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{fullName}}</h2>

    </div>

    <script src="../js/vue.js"></script>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName: 'Lebron',
                lastName: 'James'
            },
            // computed：计算属性()
            computed: {
                fullName: function() {
                    return this.firstName + ' ' + this.lastName;
                }
            },
            methods: {
                getFullName() {
                    return this.firstName + ' ' + this.lastName;
                }
            }
        })
    </script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wclNVCBq-1609508903750)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记三/1.jpg)]

计算属性的复杂操作

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-计算属性的复杂操作</title>
</head>

<body>
    <div id="app">
        <h2>总价格：{{totalPrice}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                books: [{
                    id: 110,
                    name: '深入理解计算机原理',
                    price: 119
                }, {
                    id: 111,
                    name: '斗罗大陆之绝世唐门',
                    price: 643
                }, {
                    id: 112,
                    name: 'JavaScript从入门到精通',
                    price: 99
                }, {
                    id: 113,
                    name: '高等数学',
                    price: 37
                }]
            },
            computed: {
                totalPrice: function() {
                    let result = 0;
                    for (let i = 0; i < this.books.length; i++) {
                        result += this.books[i].price;
                    }
                    return result;
                }
            }
        })
    </script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sutX2xSX-1609508903754)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记三/2.jpg)]

计算属性的setter和getter

  • 我们上面用到的计算属性看起来像个函数，但实际上应该当成一个属性。（使用的时候千万不要加小括号）
computed: {
  fullName: function() {
      return this.firstName + ' ' + this.lastName;
  }
}
  • 实际上，因为计算属性的set方法一般都不用，只有get所以简化了：
fullName: {
    // 一般情况set都没有，只有get
    set: function() {

    },
    get: function() {
        return this.firstName + ' ' + this.lastName;
    }
}

计算属性的缓存

  • 我们可能会考虑这样一个问题：
    • methods和computed看起来都可以实现我们的功能
    • 那么为什么要多一个计算属性这个东西呢？
    • 原因：计算属性会进行缓存，如果多次使用，计算属性只会调用一次。
  • 我们看下面的代码，将methods与computed进行比较。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-计算属性和methods的对比</title>
</head>

<body>
    <div id="app">
        <!-- 1.直接拼接，过于繁琐 -->
        <h2>{{firstName}} {{lastName}}</h2>
        <!-- 2.通过定义methods -->
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <!-- 3.通过定义computed -->
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>

    </div>

    <script src="../js/vue.js"></script>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName: 'Lebron',
                lastName: 'James'
            },
            // computed：计算属性()
            computed: {
                fullName: function() {
                    console.log('通过computed');
                    return this.firstName + ' ' + this.lastName;
                }
            },
            methods: {
                getFullName() {
                    console.log('通过methods');
                    return this.firstName + ' ' + this.lastName;
                }
            }
        })
    </script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qinCPM5G-1609508903755)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记三/3.jpg)]

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

阿牛大牛中
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js计算机属性computed和methods方法详解
10-16
计算机属性是Vue中用于创建基于其他数据属性动态计算的新属性的一种机制。它们是缓存的，意味着只有当其依赖的数据属性发生变化时，计算机属性的计算过程才会重新执行。这有助于提高性能，因为如果依赖的数据没有...
Vue.js第三天学习笔记（计算属性computed）
10-20
在Vue.js中，计算属性（computed）是一种非常重要的特性，用于根据其他数据动态计算出新的值。计算属性在Vue实例的生命周期中会被自动缓存，只有当其依赖的数据发生变化时，才会重新计算并更新结果。这有助于提高...
Vue基础-计算属性，方法，侦听器
多一点开心
10-06 165
计算属性，方法，侦听器一、计算属性 一、计算属性 什么情况下要使用计算属性呢 如上图为了展示想要的数据，插值表达式写的太长了，为了把要展示的数据提前处理好让插值表达式变简洁，这个时候就要使用计算属性了 计算属性有个特点，它是内置缓存的 ...
vue3的computed的用法
qq_44472790的博客
10-09 1090
以下提供一个简单的demo，仅供参考 demo示例 template部分 <template> <div>简单只读:{{ obj.computedAllNum1 }}</div> <input v-model="obj.num1" /> <br /> <input v-model="obj.num2" /> <div>可读可写</div> <input v-model=
【vue3|第8期】深入理解Vue 3 computed计算属性
最新发布
Commas的博客
06-11 886
在Vue3的世界里，计算属性（computed）是一个非常强大且实用的特性。它为我们在处理数据依赖和动态计算方面提供了极大的便利。今天，就让我们一起来深入探讨Vue3中的 computed。
Vue3中的计算属性
q709971076的博客
11-08 7398
在之前的文章中，小编和大家一起学习了关于Vue的基本语法和概念，包括组件、数据混入和插槽等。从今天开始，小编和大家一起学习Vue3中的新特性，也就是网上炒的铺天盖地的Composition-API，看看到底有什么神奇之处，我们之前通过Vue写的代码，基本都是这样 Vue.createApp({ data(){ return {name:""//绑定基本数据类型数据items:[1,2,3,4] // 绑定引用数据类型 ...
带你深度吃透Vue3 中计算属性 computed() 的使用
学而不思则罔,思而不学则殆
03-20 7568
官方推荐使用计算属性来描述依赖响应式状态的复杂逻辑
Vue3中的计算属性的详细讲解
qq_51130780的博客
12-08 1917
Vue3中计算属性以及计算属性的好处
vue计算属性computed的使用方法示例
10-17
在Vue中，`computed`属性是一种特殊的数据属性，用于定义基于其他数据属性动态计算的值。这种特性允许开发者将复杂的逻辑从模板中移出，使得模板更加简洁，同时也优化了性能，因为Vue会自动缓存`computed`属性的结果...
深入理解Vue Computed计算属性原理
08-27
深入理解Vue Computed计算属性原理 Computed 计算属性是 Vue 中常用的一个功能，它可以自动地计算并缓存依赖项的值，以便提高应用程序的性能。下面将深入探讨 Vue Computed 计算属性的原理，了解它是如何工作的。 ...
vue.js计算属性computed用法实例分析
10-18
主要介绍了vue.js计算属性computed用法,结合实例形式分析了vue.js使用computed方式进行属性计算的相关操作技巧,需要的朋友可以参考下
Vue3中的computed函数详解
linfeng_meng的博客
09-19 2813
computed函数是Vue3中的一个内置函数，它主要用于创建一个计算属性。通过使用computed函数，我们可以方便地创建一个计算属性，使代码更为简洁和可读。computed函数在组件实例中函数式声明，只要该计算属性依赖的响应式变量发生变化，它就会自动更新。
computed里面的xx : function(){}方法详解,以及watch和methods和区别
qq_34246965的博客
07-20 1935
在 Vue 中，computed 的属性可以被视为是 data 一样，可以读取和设值，因此在 computed 中可以分成 getter（读取） 和 setter（设值），一般情况下是没有 setter 的，computed 预设只有 getter ，也就是只能读取，不能改变设值。 vue.js计算属性默认只有 getter，因为是默认值所以我们也常常省略不写，如下代码： <div id="demo">{{ fullName }}</div> var vm = new Vue({
Vue3全家桶 - Vue3 - 【5】计算属性
qq_48937489的博客
03-11 1225
一、计算属性 1.1 计算属性与方法的区别： 两种方式在结果上确实是完全相同的，不同之处在于 计算属性值会基于其响应式依赖被缓存； 一个计算属性仅会在其响应式依赖更新时才重新计算，这意味着只要所依赖的数据源不改变，无论多少次访问计算属性都会立即返回先前的计算结果，而不用重复执行getter函数； 方法调用总是会在重新渲染发生时再次执行函数； 1.2 组合式API 计算属性 - 语法： 简易写法：（getter）： 只是使用计算属性的值不对其进行修改； import { computed } fr
VUE3----计算属性（computed）
王延朕的博客
03-25 1088
import {ref,reactive,computed} from 'vue' export default { name:'demo', // computed:{ // fullName(){ // return this.person.firstName + '-' + this.person.lastName // } // }, setup(){ // 数据 let pers
Vue3——第十五章（计算属性：computed）
why404
01-16 1670
Vue3——第十五章（计算属性：computed）
vue3 setup 里的计算属性（computed）和侦听器（watch/watchEffect）
热门推荐
青蛙king的博客
07-05 2万+
计算属性在vue3中是一个函数【参考】 VUE3（十四）使用计算属性computed和监听属性watch vue3的计算属性与watch Vue 3 响应式侦听与计算 vue3计算属性（computed）与监听（watch） Vue3官网-高级指南（十七）响应式计算和侦听（onTrack、onTrigger、onInvalidate、副作用的刷新时机、 、pre）................................................
前端之vue3计算属性computed
weixin_46372074的博客
05-24 7470
计算属性computed
vue3--计算属性
qq_43470725的博客
08-14 270
vue
vue项目中的计算属性computed和监听属性watch怎么使用
04-23
在Vue的组件实例中，可以通过在computed选项中定义计算属性。比如，我们可以定义一个计算属性fullName，用于拼接firstName和lastName： ``` First name: <input v-model="firstName"><br> Last name: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值