Vue(二) 计算属性

模板内的表达式常用于简单的运算,当过长或逻辑复杂时,难以维护,计算属性就是解决该问题的

什么是计算属性

表达式如果过长,或逻辑更为复杂,就会变得臃肿甚至难以维护,比如:

<div>
    {{ text.split('.').reverse().join('.') }}
</div>

该表达式包含 3 个操作,并不是很清晰,可以用计算属性进行改写:

<div id="app">
    {{ reverseText }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            text: '123,456'
        },
        computed: {
            reverseText: function () {
                //这里的 this 是当前的 Vue 实例
                return this.text.split(',').reverse().join(',');
            }
        }
    })
</script>

所有的计算属性都以函数的形式写在 Vue 实例内的 computed 选项内,最终返回计算结果。

计算属性的用法

除了上例简单的用法,计算属性还可以依赖多个 Vue 实例的数据。只要其中任一数据变化,计算属性就会重新执行,视图也会更新。例如,下面的实例是在展示购物车内两个包裹的总价。

<div id="app">
    {{ prices }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            package1: [
                {
                    name: 'iphone xs max',
                    price: 9999,
                    count: 2
                },
                {
                    name: 'ipad pro',
                    price: 6666,
                    count: 2
                }
            ],
            package2: [
                {
                    name: 'apple',
                    price: 20,
                    count: 20
                },
                {
                    name: 'orange',
                    price: 18,
                    count: 20
                }
            ]
        },
        computed: {
            prices: function () {
                var prices = 0;
                for(var i = 0; i < this.package1.length; i++) {
                    prices += this.package1[i].price * this.package1[i].count;
                }
                for(var i = 0; i < this.package2.length; i++) {
                    prices += this.package2[i].price * this.package2[i].count;
                }
                return prices;
            }
        }
    })
</script>

当 package1 和 package2 中的商品有任何变化时,比如购买数量变化或增删商品时,计算属性 prices 就会自动更新,视图中的 prices 也会自动变化。

geter 和 setter

每一个计算属性都包含一个 getter 和一个 setter,上面的两个例子都是计算属性的默认用法,只是利用了 getter 来读取,在你需要时,也可以提供一个 setter 函数,当手动修改计算属性的值时就会触发 setter 函数,执行一些自定义操作,例如:

<div id="app">
    {{ fullName }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            firstName: 'Jack',
            lastName: 'Green'
        },
        computed: {
            fullName: {
                //  getter, 用于读取
                get: function () {
                    return this.firstName + ' ' + this.lastName;
                },
                //  setter,写入时被触发
                set: function (newValue) {
                    var names = newValue.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[names.length - 1];
                }
            }
        }
    })
</script>

当在浏览器的控制台执行 app.fullName = ‘John Doe‘; 时,setter 就会被调用,数据 firstName 和 lastName 都会相对更新,视图也会更新。

绝大多数情况下,我们只会用默认的 getter 方法来读取一个计算属性,在业务中很少用到 setter,因此在声明一个计算属性时,直接使用默认的方法即可,不必将 getter 和 setter 都声明。

计算属性除了上述简单的文本插值外,还经常用于动态地设置元素的样式名称 class 和内联样式 style。当使用组件时,计算属性也常用于动态传递 props。

计算属性还有两个很实用的小技巧:一个计算属性可以依赖其他的计算属性;二是计算属性不仅可以依赖当前 Vue 实例的数据,还可以依赖其他实例的数据。

计算属性缓存

在上一篇介绍指令和时间时,你可能发现调用 methods 里的方法也可以与计算属性起到同样的作用,比如本章第一个示例可以用 methods 改写为:

<div id="app">
    {{ reverseText() }}
</div>
<script>
    var app = new Vue({
        <!-- 注意:这里的 reverseText 是方法,所以要带() -->
        el: '#app',
        data: {
            text: '123,456'
        },
        methods: {
            reverseText: function () {
                //这里的 this 是当前的 Vue 实例
                return this.text.split(',').reverse().join(',');
            }
        }
    })
</script>

没有使用计算属性,在 methods 里定义了一个方法实现了相同的效果,甚至该方法还可以接受参数,使用起来更灵活。那为什么还需要计算属性呢?原因就是计算属性是基于它的依赖缓存的,一个计算属性所依赖的的数据发生变化时,它才会重新取值,所以 text 只要不改变,计算属性也就不更新,例如:

computed: {
    now: function() {
        return Date.now();
    }
}

这里的 Dtae.now() 不是响应式依赖,所以计算属性 now 不会更新。但是 methods 则不同,只要重新渲染,它就会被调用,因此函数也会被执行。

使用计算属性还是 methods 取决于你是否需要缓存,当遍历大数组和大量计算时,应当使用计算属性,除非你不希望得到缓存。

原文地址:https://www.cnblogs.com/kindleheart/p/9983637.html

时间: 11-16

Vue(二) 计算属性的相关文章

关于vue的计算属性以及双向绑定的原理理解(vue2.x)以及vue3.0

vue的计算属性: 1.什么是计算属性? 计算属性的目的是用于对数据进行简单运算的,若在模板中放过多的计算逻辑会导致模板难以维护. 计算属性是基于它们的依赖进行缓存的.计算属性只有在它的相关依赖发生改变时才会重新求值. 2.计算属性如何使用? 1.在一个计算属性里可以完成各种复杂的逻辑,包括运算.函数调用等,只要最终返回一个结果就可以. computed: { reverseText: function(){ return app1.text.split('').reverse().join('

vue的计算属性

在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中的数据发生变化时.所有依赖计算属性中的函数也会更新.而且最妙的是,我们已经以声明的方式创建了这种依赖关系:计算属性的getter是没有副作用的,这使得它易于推理和测试. 1,计算属性与methods 我们将同一函数定义为method,而不是一个计算属性,得到的结果都是一样的.然而两者的不同:计算属性

Vue.js 计算属性

Vue.js 计算属性 使用计算属性的实例: <!DOCTYPE html> <html> <head> <meta cahrset="utf-8"> <title>computed</title> <script src="vue.min.js"></script> </head> <body> <div id="app"

vue中计算属性vs方法的区别

一 什么是计算属性? 计算属性(computed),也是一个属性,也是用来存储数据用的,但是和data属性相比还是有区别 1 数据是可以进行逻辑处理相关的操作 2 可以对计算属性中的数据进行监视 例如: 调用的方式都是一样的 二 计算属性和方法的区别? 1 计算属性是基于它所依赖的数据进行更新,在有在相关依赖的数据发生变化了才会进行更新,而普通的方法每次都会执行 2 计算属性是有缓存的,只要它所依赖的数据没有发生改变,后面的每一次访问计算属性中的值,都是之前缓存的结果,不会重复执行. 例如: h

vue中计算属性,方法,侦听器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中计算属性,方法,侦听器</title> <script src="./vue.js"></script> </head> <body> <div id="app&qu

Vue中计算属性

一般情况下属性都是放在data中的,但是有些属性可能是需要经过一些计算才能得出,那么,我们可以把这类属性变成计算属性.此时,需要将这些计算属性写到computed中,和将属性写在data中是一样的.表面上看,计算属性和methods一样,实际上,计算属性更加智能,他是基于它们的响应式依赖进行缓存的.也就是说,只要相关依赖(比如下面的例子中的“area”)没有发生变化,那么这个计算属性的函数就不会重新执行,而是直接返回之前的值.这个缓存功能使计算属性访问起来更高效. 计算属性set: set方法是

二、vue基础--计算属性和监听器

1.一些操作需要计算后才能得到的用计算属性,需要放在computed属性中代码如下: <div id='app'> <div> <label>宽:</label> <input type="text" v-model:value="width"> </div> <div> <label>高:</label> <input type="text&

通俗易懂了解Vue的计算属性

1.前言 之前在学习vue的过程中,一直没有搞明白计算属性是个怎么回事,以及为什么要有计算属性,使用计算属性有什么好处.今天花时间翻了翻官方文档,才搞清楚其中一二,现将学习心得总结记录如下. 2.为什么要使用计算属性 试想有这样一个场景: 当我们在网购的时候,打开购物车,我们在增加或减少购物车内货物的数量时,下面的消费总额也在随着联动变化. 那么有了这个场景,我们用vue来简单实现一下.话不多说,直接上代码: 1 <!DOCTYPE html> 2 <html lang="en

vue之计算属性和侦听器

一.使用计算属性 模板内的表达式是非常便利的,但适用于简单运算.在模板中放入太多的逻辑会让模板过重且难以维护. <script src="vue.js"></script> <div id="app"> <p>{{ msg.split("").reverse().join("") }}</p> </div> <script> var vm= n