【Day3.计算属性的使用】

1.计算属性（computed）基础使用：

（1）模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。通俗来讲，就是用已经定义的属性，计算出需要用的属性。

（2）是用Object.definedprototype的getter和setter（计算属性的值一般不做修改）来实现的。

代码：

<div id="root">
        姓：<input type="text" v-model="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        全名：<span>{{getfullName()}}</span><br><br>
        全名：<span>{{fullName}}</span><br><br>
        
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            data() {
                return {
                    firstName: '尼古拉斯赵',
                    lastName: '四',
                }
            },
            methods: {
                getfullName(){
                    return this.firstName+'-'+this.lastName;
                }
            },
            computed: {
                // fullName() {//可以简写成这种方式
                //     return this.firstName + '-' + this.lastName
                // }
                fullName:{
                    get(){
                        return this.firstName+'-'+this.lastName;
                    },
                    set(value) {
                        console.log('set', value)
                        const arr = value.split('-')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
                
            }
        
        });
    </script>

（3）get的调用：

        （1）初次读取时会执行一次。

        （2）计算属性依赖的数据发生改变时会调用。

（4）计算属性（computed）的优势：

        与methods相比，前者内部有缓存机制，可以复用，效率更高。

    备注：

                  （1）计算属性最终会出现在vm上，直接读取使用即可。

                  （2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

2.计算属性的复杂使用：

        以遍历数组的七种方式为例演示：

        代码：

<div id="root"> 总价:{{totalPrice}} </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            data() {
                return {
                    books: [{
                        id: 110,
                        name: "JavaScript从入门到入土",
                        price: 119
                    },
                    {
                        id: 111,
                        name: "Java从入门到放弃",
                        price: 80
                    },
                    {
                        id: 112,
                        name: "编码艺术",
                        price: 99
                    },
                    {
                        id: 113,
                        name: "代码大全",
                        price: 150
                    }
                    ]
                }
            },
            methods: {

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


                // 2.foreach
                // totalPrice() {
                //     let sum = 0;
                //     this.books.forEach(function (value) {
                        
                //         sum += value.price;
                //     })
                //     return sum;
                // }


                // 3.for in 
                // totalPrice() {
                //     let sum = 0;
                //     for(let v in this.books){
                //         sum += this.books[v].price;
                //     };
                //     return sum;
                // }


                // 4.for of 
                // totalPrice() {
                //     let sum = 0;
                //     for (let v of this.books) {
                //         sum += v.price;
                //     };
                //     return sum;
                // }


                // 5.map 
                // totalPrice() {
                //     let sum=0;
                //      this.books.map(function(item){
                //          sum+=item.price;
                //      })
                //      return sum;
                // }


                // 6.filter
                // totalPrice() {
                //     let sum = 0;
                //     this.books.filter(function (item) {
                //         sum += item.price;
                //     })
                //     return sum;
                // }


                // 7.reduce
                totalPrice() {
                    return this.books.reduce(function(total,item){
                        return total+item.price;
                    },0)
                }
            }
        });
    </script>