计算属性的复杂使用

现在有一个数组数据books，里面包含许多book对象，数据结构如下：

    <script>
        const vm = new Vue({
            el: '#vm',
            data: {
                books: [
                    {id: 110,name: "JavaScript从入门到入土",price: 119},
                    {id: 111,name: "Java从入门到放弃",price: 80},
                    {id: 112,name: "编码艺术",price: 99},
                    {id: 113,name: "代码大全",price: 150}
                ]
            }
        })
    </script>

要求计算出所有book的总价格res，代码如下：

    <div id="vm">
        <p>总价格：{{totalPrice}}</p>
    </div>

方法一：for循环

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

方法二：forEach遍历

            computed: {
                totalPrice() {
                    let res = 0;
                    this.books.forEach(item => {
                        res += item.price;
                    })
                    return res;
                }
            }

方法三：for...in...遍历

            computed: {
                totalPrice() {
                    let res = 0;
                    for (let i in this.books) {
                        res += this.books[i].price;
                    }
                    return res;
                }
            }

方法四：for...of...

            computed: {
                totalPrice() {
                    let res = 0;
                    for (let item of this.books) {
                        res += item.price;
                    })
                    return res;
                }
            }

方法五：map遍历

            computed: {
                totalPrice() {
                    let res = 0;
                    this.books.map(item => {
                        res += item.price;
                    })
                    return res;
                }
            }

方法六：filter

            computed: {
                totalPrice() {
                    let res = 0;
                    this.books.filter(item => {
                        res += item.price;
                    })
                    return res;
                }
            }

方法七：reduce累加求值

            computed: {
                totalPrice() {
                    return this.books.reduce((current, item) => {
                        return current + item.price
                    }, 0)
                    return res;
                }
            }

获取每一个book对象的price累加，当其中一个book的价格发生改变时候，总价会随之变化。