Vue学习(4)：计算属性computed开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点

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

计算属性

在以前的写法中，如果我们要在一个节点中显示多个数据，

可能会这样写
或者这样写

代码阅读性比较差，数据冗杂，我们既想通过变量的方式获取值，又不想想函数一样写法，就要变化属性

computed 的使用

语法

Vue 实例中，需要在 option 里面传入computed，用来存放函数，在 {{}} 语法中就像属性一样访问

使用

<section> 我喜欢看 {{ movies }}</section>

computed: {
    movies: function() {
        return this.move1 + this.move2 + this.move3
    }
}

缓存

计算方法具有缓存的优点，如果一个页面中有多次调用该属性，那么真正执行的次数只有一次

<section> 数据汇总 {{ prices_one }}</section>
<section> 数据汇总 {{ prices_one }}</section>
<section> 数据汇总 {{ prices_one }}</section>
<section> 数据汇总 {{ prices_one }}</section>
<section> 数据汇总 {{ prices_one }}</section>
<section> 数据汇总 {{ prices_one }}</section>
<section> 数据汇总 {{ prices_one }}</section>

<section> 数据汇总 {{ prices_two() }}</section>
<section> 数据汇总 {{ prices_two() }}</section>
<section> 数据汇总 {{ prices_two() }}</section>
<section> 数据汇总 {{ prices_two() }}</section>
<section> 数据汇总 {{ prices_two() }}</section>
<section> 数据汇总 {{ prices_two() }}</section>
<section> 数据汇总 {{ prices_two() }}</section>

var app = new Vue({
    el: '#app',
    data: {
        books: [{
            id: 1,
            name: '《基督山伯爵》',
            price: 108
        }, {
            id: 2,
            name: '《嫌疑犯X的现身》',
            price: 53
        }, {
            id: 3,
            name: '《穆斯林的葬礼》',
            price: 41
        }, {
            id: 4,
            name: '《兄弟》',
            price: 22
        }, ]
    },
    computed: {
        prices_one: {
            get() {
                console.log('执行了该get方法');
                let total = 0;
                this.books.forEach(element => {
                    total += element.price;
                });
                return total
            },
        }
    },
    methods: {
        prices_two: function() {
            console.log('执行了这个函数');
            let total = 0;
            this.books.forEach(element => {
                total += element.price;
            });
            return total
        }
    }
})

在这里插入图片描述

setter和getter

简介

对象属性是由名字，值，和一组特性组成的，在ES5中，属性值可以由一个或者两个方法代替，这两个方法就是 getter 和 setter ，由这两个所定义的属性叫做存储器属性，其不同于数据属性，数据属性只是个值
类似python 里面的动态属性，像访问属性的方式访问一个方法

使用

当程序查找属性的时候，JS调用的是 getter 这个方法，当修改属性的时候，调用的是 setter 这个方法

与数据属性不同的是，如果只定义了 getter 这个方法，那么该属性是只读属性

var obj = {
    $lastName: 'frage',		// $开头的属性是私有属性
    get myname() {
        return this.$lastName;
    }
}
console.log(obj.myname);	// 获取myname这个属性实际上是调用 get 开头的 myname 方法

如果只定义了 setter 这个方法，那么该属性是只写属性

var obj = {
    $lastName: 'frage',
    set myname(newvalue) {				// newvalue 必须写，用来获取修改的值
        this.$lastName = newvalue;
    }
}

console.log(obj.myname);	// underfined，

定义 setter 和 getter ，该属性是 读/写 属性

var obj = {
    $lastName: 'frage',
    get myname() {
        return this.$lastName;
    },
    set myname(newvalue) {
        this.$lastName = newvalue;
    }
}
console.log(obj.myname);

案例2：价格总数计算

<section> 数据汇总 {{ prices }}</section>

var app = new Vue({
    el: '#app',
    data: {
        books: [{id: 1, name: '《基督山伯爵》', price: 108}, 
                {id: 2, name: '《嫌疑犯X的现身》', price: 53}, 
                {id: 3, name: '《穆斯林的葬礼》', price: 41}, 
                {id: 4, name: '《兄弟》', price: 22}, 
               ]
    },
    computed: {
        prices: function() {
            let total = 0;
            this.books.forEach(element => {
                total += element.price;
            });
            return total
        }
    }
})

在这里插入图片描述