vue学习记录-04 计算属性

vue学习记录-04 计算属性

这篇文章是根据codewhy老师在b站的视频进行的学习记录

---

---

一、计算属性的基本使用

我们知道，mustache语法支持简单的运算的。

        <h2>{{firstName+' '+lastName}}</h2>
        <h2>{{firstName}} {{lastName}}</h2>

现在看起来现在仅仅只是将两个数据进行一个拼接，但是如果之后有什么比较复杂的数据处理，需要在mustache中放入过多的表达式进行运算才能使用，那么自然是不利于程序员维护的。
下面也仅仅只是一个自我介绍时用到的简单的字符串拼接，想想如果还要再加上各种方法呢？

        <h2>{{firstName+' '+lastName+'myage:'+age+'岁'+'...(这人自我介绍挺啰嗦的，中间省略200字)'+'，自我介绍结束'}}</h2>

因此，在mustache中只需要表达出这里放的是什么东西就足够了，如果数据需要进行处理才能放入mustache中，那么VUE建议使用计算属性进行处理后再使用。
例如这样：

<h2>{{fullName}}</h2>

data: {
                firstName:'Lebron',
                lastName:'James'
            },
computed:{
                fullName:function(){
                    return this.firstName+' '+this.lastName
                }
            },

我们使用计算属性能做的事使用方法也是可以实现的。

<h2>{{getFullName()}}</h2>

methods:{
                getFullName(){
                    return this.firstName+' '+this.lastName
                }
            }

与方法不同，计算属性仅仅只是一个属性而不是一个要执行的动作，因此，计算属性我们在命名时最好使用名词，而不是动词。
计算属性与methods方法还有一些其他方面的不同，文章后面我们将会进行对比。

二、计算属性的复杂操作

计算属性可以进行一些更复杂的操作，我们拿个案例进行演示。
假设现在有一个书店收银系统，其他的功能都做好了，只剩一个计算全部书籍价格的小功能，组长把这个功能交给我们去实现，那么我们需要怎么做呢？
代码如下：

<div id='app'>
        <h2>总价格：{{totalPrice}}</h2>
    </div>

const app = new Vue({
            el: '#app',
            data: {
                books:[
                    {id:110,name:"VUE",price:119},
                    {id:111,name:"Linux",price:159},
                    {id:112,name:"JAVA",price:419},
                    {id:113,name:"GIT",price:24},
                ]
            },
        computed:{
			totalPrice(){
				？
			}
		}    
 })

我们应该怎么实现totalPrice呢？
当然是将顾客买的书的价格全部加在一起。

	this.books[0].price+this.books[1].price+this.books[2].price+this.books[3].price

这样虽然是可以，但是代码很不灵活，毕竟不可能每次都只买这些书吧？除非书店只有这四本书买的同时要求顾客必须一起买（比如老师要求买教材资料？）。

所以我们可以使用for循环对books的价格进行求和。

	let result=0
    for(let i=0;i<this.books.length;i++){
        result +=this.books[i].price
    }
    return result

或者使用for…in循环，这样我们可以很方便的通过键名获取键值进行额外的操作。

	let result=0;
    for(let i in this.books){
         result +=this.books[i].price
     }
     return result

在ES6中，支持使用for of循环直接获取键值。

     let result=0;
     for(let book of this.books){
         result +=book.price
     }
     return result

前面提到过，计算属性中也可以使用方法函数，所以要实现这个功能，最简单的方法还是使用reduce方法。

	return this.books.reduce((prev, cur) => prev+cur.price,0)

关于reduce方法：
写法：数组.reduce(callback,initialValue)
callback:一个回调函数，作用是执行数组中每个值的函数，包含四个参数
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）
initialValue：即初始值，第一次调用callback时使用的值

三、计算属性的setter和getter

计算属性本质上是一个属性而非函数，所以作为一个属性，它是有setter方法和getter方法的，不过我们通常默认计算属性是只读的，所以基本上我们不会去实现的他的setter方法，只会作为getter方法去实现，这个作为了解即可。
简洁写法（不包含setter方法）：

<div id='app'>
        {{fullName}}
    </div>

const app = new Vue({
            el: '#app',
            data: {
                firstName:'Kobe',
                lastName:'Bryant'
            },
            computed:{
                fullName:function(){
                    return this.firstName+' '+this.lastName
                }
            }
        })

同时，在调用计算属性时，由于它不是函数，所以不需要再在后面加小括号

计算属性完整写法（包含setter方法）：

fullName:{
    //计算属性一般没有set方法，即只读属性，不希望改变属性
    // set:function(){},
    set:function(newValue){
        console.log('传入参数:',newValue);
        const names=newValue.split(' ');
        this.firstName=names[0];
        this.lastName=names[1];
    },
    //一般只需要使用get方法
    get:function(){
        return this.firstName+' '+this.lastName
    }
}

四、计算属性和methods的对比

关于计算属性与methods的对比，首先我们需要回想起来，我们为什么要使用计算属性？
如果直接在html拼接数据，语法会过于繁琐，而且html不要在写过多逻辑处理。

        <h2>{{firstName+'这里是一堆乱七八糟的逻辑处理'+lastName}}</h2>

那么计算属性与methods有什么不同呢？换句话说，既然methods能做到跟计算属性一样的事，那么为什么VUE还要专门写一个计算属性呢？
先简单说下结论：计算属性性能更优，methods性能更低。
下面直接放代码：

<div id='app'>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>

        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
    </div>

        const app = new Vue({
            el: '#app',
            data: {
                firstName:'Kobe',
                lastName:'Bryant'
            },
            methods:{
                getFullName:function(){
                    console.log("getFullName");
                    return this.firstName+' ' +this.lastName
                }
            },
            computed:{
                fullName:function(){
                    console.log("fullName");
                    return this.firstName+' '+this.lastName
                }
            }
        })

在控制台中，我们可以看到，getFullName打印了四次，而fullName只打印了一次：

为什么呢？

因为通过定义methods实现的数据处理，调用了几次就会执行几次，每次都会重新计算，性能更低。
而通过计算属性实现数据处理，只会调用一次，因为VUE做了缓存，会观察数据是否有变化，没有变化就不会调用，性能更优。