vue中的计算属性

Hushhhhh
73 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情

计算属性的基本使用

在某些情况下，我们可能需要对数据进行一些转化后再显示，例如将一个字符串反转后显示，可以通过{{str.split('').reverse().join('')}}实现，虽然在模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的，放入太多的逻辑会让模板过重且难以维护

对于这种复杂逻辑的计算，可以使用计算属性，什么是计算属性？就是写在computed对象中的属性，本质上是一个方法，不过使用时依旧当属性来使用，那如何使用计算属性来实现上面的复杂操作呢？

<div id="app">
    <h2>{{reverseStr}}</h2>
</div>

<script src="./vue.js"></script>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            str:'123456789'
        },
        computed:{
            reverseStr(){//虽然是一个方法，不过可以当属性使用
                return this.str.split('').reverse().join('') //必须有返回值，返回复杂计算的结果
            }
        }
    })
</script>

计算属性的复杂操作

上面虽然介绍了计算属性的基本使用，但操作简单体现不出计算属性的重要性，但是在一些时候就必须使用计算属性了

例如有一个数组，数组里存放着对象，每一个对象中都有一本书籍的名字，价格，id。当我们需要计算每个对象的价格的和时，如果在模板里去计算就太长太复杂了，这是不可取的，但是使用计算属性就非常就简单了

<h2>总价格:{{total}}</h2>

data:{
    books:[
        {id:1,name:'禅与摩托车维修艺术',price:100},
        {id:2,name:'编程大全',price:25},
        {id:3,name:'php',price:65},
        {id:4,name:'Java',price:44},
        {id:5,name:'Python',price:12}
    ]
},
computed:{
    total(){
        let result=0
        for(let i in this.books){ //遍历数组每一项，将每一项的价格加起来得到总价
            result+=this.books[i].price
        }
        return result //最后返回总价
    }
}

图片.png

就算使用模板来计算出总价，如果再插入一条或者多条数据呢？模板里的内容也要跟着修改，而计算不用，当我们往数组插入数据的时候一样可以计算出总价

//添加按钮绑定点击事件，每次点击插入一条数据
<button @click="add">添加</button> 

methods: {
    add(){
        this.books.push({id:5,name:'Python',price:12})
    }
},

2.gif

计算属性的getter和setter

像上面的写法都是计算属性的简写，完整的写法是在计算属性里定义一个属性，它应该是一个对象，里面会有一个get()方法和一个set方法

total:{
    get(){

    },
    set(){

    }
}

当我们使用属性的时候会去调用get方法拿到返回的结果

data:{
    lastName:'李',
    firstName:'四'  
}

total:{
    get(){
        return this.lastName+this.firstName
    },
    set(){  

    }
}

图片.png

一般情况下，只用到get方法，我们希望这个属性是一个只读的属性，不希望其他人随便给这个属性设置值，所以会直接把set方法去掉只保存get方法

在不一般的情况下需要使用到set方法，如何去使用呢？我们在控制台直接输入计算属性的时候会打印出get方法返回的结果，当我们作出了修改可以看到调用了set方法

set(){
    console.log('调用了set方法');
}

2.gif

但是其实只调用了set方法，属性的值没有修改成功，还是原来的值

图片.png

在set方法里有一个形参，会把修改后的值传到这个形参里，我们要确确实实的保存修改过的值就可以将这个形参截取分别赋值给lastName和firstName，lastName和firstName修改之后又会去调用get方法，使得计算属性得值被真正的修改了

set(newValue){
    // console.log('调用了set方法');
    const res=newValue.split('')
    this.lastName=res[0],
    this.firstName=res[1]  
}

图片.png

avatar
文章
阅读
粉丝