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

1.前言

之前在学习vue的过程中,一直没有搞明白计算属性是个怎么回事,以及为什么要有计算属性,使用计算属性有什么好处。今天花时间翻了翻官方文档,才搞清楚其中一二,现将学习心得总结记录如下。

2.为什么要使用计算属性

试想有这样一个场景:

当我们在网购的时候,打开购物车,我们在增加或减少购物车内货物的数量时,下面的消费总额也在随着联动变化。

那么有了这个场景,我们用vue来简单实现一下。话不多说,直接上代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9     <span>请输入货物1的数量:<input type="text" v-model="package1.count"></span>
10     <span>请输入货物1的价格:<input type="text" v-model="package1.price"></span>
11     <br>
12     <span>请输入货物2的数量:<input type="text" v-model="package2.count"></span>
13     <span>请输入货物2的价格:<input type="text" v-model="package2.price"></span>
14     <br>
15     <span>货物1的数量是:{{package1.count}}</span>
16     <span>货物1的价格是:{{package1.price}}</span>
17     <br>
18     <span>货物2的数量是:{{package2.count}}</span>
19     <span>货物2的价格是:{{package2.price}}</span>
20     <br>
21     <span>货物总价是:{{package1.count*package1.price + package2.count*package2.price}}</span>
22
25 </div>
26 <script src="vue.js"></script>
27 <script type="text/javascript">
28     new Vue({
29         el:"#app",
30         data(){
31             return{
32                 package1:{
33                     price:"",
34                     count:""
35                 },
36                 package2:{
37                     price:"",
38                     count:""
39                 }
40             }
41         }
42      })
43 </script>
44 </body>
45 </html>

我们知道,消费总额是通过购物车内货物的数量以及每件货物的价格计算得到的。因此,我们需要在模板内写很长很复杂的计算表达式,虽然能够实现功能,然而这并不是vue所推荐,并且在模板内放入太多的逻辑会让模板过重并且难以维护。所以,对于模板内的需要经过复杂计算或者复杂逻辑得出的变量,vue更推荐我们使用计算属性。

3.如何使用计算属性

使用计算属性,我们只需在vue实例内增加computed选项,然后在选项内编写属性名以及复杂的计算逻辑即可。

下面,我们使用计算属性将上面例子进行重写,代码如下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9     <span>请输入货物1的数量:<input type="text" v-model="package1.count"></span>
10     <span>请输入货物1的价格:<input type="text" v-model="package1.price"></span>
11     <br>
12     <span>请输入货物2的数量:<input type="text" v-model="package2.count"></span>
13     <span>请输入货物2的价格:<input type="text" v-model="package2.price"></span>
14     <br>
15     <span>货物1的数量是:{{package1.count}}</span>
16     <span>货物1的价格是:{{package1.price}}</span>
17     <br>
18     <span>货物2的数量是:{{package2.count}}</span>
19     <span>货物2的价格是:{{package2.price}}</span>
20     <br>
21     <span>货物总价是:{{totalPrice}}</span>
22 </div>
23 <script src="vue.js"></script>
24 <script type="text/javascript">
25     new Vue({
26         el:"#app",
27         data(){
28             return{
29                 package1:{
30                     price:"",
31                     count:""
32                 },
33                 package2:{
34                     price:"",
35                     count:""
36                 }
37             }
38         },
39         computed:{
40             totalPrice:function () {
41                 return this.package1.count*this.package1.price + this.package2.count*this.package2.price
42             }
43         }
44     })
45 </script>
46 </body>
47 </html>

从代码中,我们可以看到,我们给computed选项内增加了货物总价totalPrice属性,并且将计算的过程写在了属性内,而模板中只用写{{ totalPrice }}即可。

4.使用计算属性有什么好处

尽管vue不推荐我们在模板内写复杂的计算逻辑,可是我们可以在methods选项内写一个方法照样可以实现上面的需求呀,请看如下代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9     <span>请输入货物1的数量:<input type="text" v-model="package1.count"></span>
10     <span>请输入货物1的价格:<input type="text" v-model="package1.price"></span>
11     <br>
12     <span>请输入货物2的数量:<input type="text" v-model="package2.count"></span>
13     <span>请输入货物2的价格:<input type="text" v-model="package2.price"></span>
14     <br>
15     <span>货物1的数量是:{{package1.count}}</span>
16     <span>货物1的价格是:{{package1.price}}</span>
17     <br>
18     <span>货物2的数量是:{{package2.count}}</span>
19     <span>货物2的价格是:{{package2.price}}</span>
20     <br>
21     <span>货物总价是:{{totalPrice()}}</span>
22 </div>
23 <script src="vue.js"></script>
24 <script type="text/javascript">
25     new Vue({
26         el:"#app",
27         data(){
28             return{
29                 package1:{
30                     price:"",
31                     count:""
32                 },
33                 package2:{
34                     price:"",
35                     count:""
36                 }
37             }
38         },
39         methods:{
40           totalPrice(){
41               return this.package1.count*this.package1.price + this.package2.count*this.package2.price
42           }
43         }
44     })
45 </script>
46 </body>
47 </html>

注意看上面标红处的代码,我们实现了一个计算货物总价的方法,然后在模板内调用该方法即可,这样也实现了上面的需求。

既然如此,写一个方法也可以实现我们的需求,那么,vue推荐我们使用计算属性,到底这个计算属性有什么好处呢?

其实不然,我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要货物的数量和价格没有发生改变,多次访问totalPrice计算属性会立即返回之前的计算结果,而不必再次执行函数。相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。

我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算,如果采用计算属性,那么只需计算一次,计算结果将会被缓存下来,我们可能还有其他的计算属性依赖于 A,这样A就不会被多次计算从而节省性能 。但是,如果使用方法调用的话,每使用一次A,函数就会被执行一次,这无疑会造成性能上的浪费。当然如果你不希望有缓存,那么就采用方法调用的方式来替代。

5.计算属性使用技巧

技巧一:计算属性不仅可以依赖data里的数据,多个计算属性之间也可以互相依赖。

例如:我们给上面的需求增加一个货物总价打八折后的价格:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9     <span>请输入货物1的数量:<input type="text" v-model="package1.count"></span>
10     <span>请输入货物1的价格:<input type="text" v-model="package1.price"></span>
11     <br>
12     <span>请输入货物2的数量:<input type="text" v-model="package2.count"></span>
13     <span>请输入货物2的价格:<input type="text" v-model="package2.price"></span>
14     <br>
15     <span>货物1的数量是:{{package1.count}}</span>
16     <span>货物1的价格是:{{package1.price}}</span>
17     <br>
18     <span>货物2的数量是:{{package2.count}}</span>
19     <span>货物2的价格是:{{package2.price}}</span>
20     <br>
21     <span>货物总价是:{{totalPrice}}</span>
22     <br>
23     <span>打折后总价是:{{cheapPrice}}</span>
24 </div>
25 <script src="vue.js"></script>
26 <script type="text/javascript">
27     new Vue({
28         el:"#app",
29         data(){
30             return{
31                 package1:{
32                     price:"",
33                     count:""
34                 },
35                 package2:{
36                     price:"",
37                     count:""
38                 }
39             }
40         },
41         computed:{
42             totalPrice:function () {
43                 return this.package1.count*this.package1.price + this.package2.count*this.package2.price
44             },
45             cheapPrice:function () {
46                 return this.totalPrice*0.8
47             }
48         }
49     })
50 </script>
51 </body>
52 </html>

如标红处的代码,打折后的总价cheapPrice这个计算属性依赖了上面的货物总价totalPrice这个计算属性。

技巧二:计算属性不仅可以依赖自身实例内的数据,也可以依赖其他实例内的数据。

 1  var vm1 = new Vue({
 2         data(){
 3             return{
 4                 package:{
 5                     price:"",
 6                     count:""
 7                 }
 8             }
 9         },
10     })
11     var vm2 = new Vue({
12         el:"#app",
13         data(){
14             return{
15                 package:{
16                     price:"",
17                     count:""
18                 }
19             }
20         },
21         computed:{
22             totalPrice:function () {
23                 return vm1.package.count*vm1.package.price + this.package.count*this.package.price
24             },
25             cheapPrice:function () {
26                 return this.totalPrice*0.8
27             }
28         }
29     })

(完)

原文地址:https://www.cnblogs.com/wangjiachen666/p/9499502.html

时间: 08-18

通俗易懂了解Vue的计算属性的相关文章

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中计算属性,方法,侦听器

<!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的计算属性以及双向绑定的原理理解(vue2.x)以及vue3.0

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

Vue中计算属性

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

Vue之计算属性

上一篇里演示了计算属性的优点,但是,computed和data里的属性还是有区别的,computed的一个弱点就在于依赖于data属性的更新,才能触发视图更新. 举个例子: 上个例子中谈到用v-for来加载妹子图片,现在我想在原先的基础上,添加两个按钮,一个用来增加一个妹子,一个用来减少一个妹子: html: <div id="vfor"> <template v-for="mm in mms"> <span>{{mm.name}

VUE:计算属性和监视

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 1.计算属性: 在computed属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算结果 2.监视属性: 通过vm对象的$watch()或watch配置来监视指定的属性 当属性变化时,回调函数自

Vue(二) 计算属性

模板内的表达式常用于简单的运算,当过长或逻辑复杂时,难以维护,计算属性就是解决该问题的 什么是计算属性 表达式如果过长,或逻辑更为复杂,就会变得臃肿甚至难以维护,比如: <div> {{ text.split('.').reverse().join('.') }} </div> 该表达式包含 3 个操作,并不是很清晰,可以用计算属性进行改写: <div id="app"> {{ reverseText }} </div> <scri

Vue computed 计算属性

<template> <div id="app"> <div>{{reverseTitle}}</div> <div>{{reverseTitle2()}}</div> <button @click="add()">补充货物1</button> <div>总价为:{{price}}</div> </div> </template&