08-计算属性

1、computed 

//计算属性的本质就是一个方法，只不过，我们在使用的时候，
//把他们的名称直接当属性来用，而不是当方法来用，
//所以，使用的时候不需要带上()
//computed的属性可以被视为是 data 一样，可以读取和设值，
//因此在 computed 中可以分成 getter（读取） 和 setter（设值），
//一般情况下是没有 setter 的，computed 预设只有 getter ，
//也就是只能读取，不能改变设值。
    <div id="app">
        a=>:{{a}}

        <button @click="setB">修改B</button>
    </div>

<script>
        // computed  计算属性 ：依赖其他属性值，并且 computed 有缓存，
        //只有他依赖的属性值发生改变，下一次computed 才会重新计算
        // 页面加载时 会主动执行一次
        // 它是同步的操作


        // 1. 支持缓存， 只有依赖的数据发生改变时发生改变
        // 2. 不支持异步
        // 3. computed 可以进行值得缓存
        // 4. 如果一个属性是由其他属性计算得来的， 
        //也就是说这个属性依赖其他属性， 及一对一或一对多我们通常使用computed
        // 5. computed 的属性值是函数 
        //默认会执行 get 方法 函数的返回值就是 
        //属性的属性值， 在computed 中每一个属性 
        //都有一个get 方法 和 set 方法（ 必须return 才有值）
        
        //每一个计算属性都包含一个 getter与setter.
        //计算属性会默认使用getter函数，setter函数并不常用，
        //所以一般计算属性setter与getter都不写
        //setter函数内的形参是你修改的值(必须修改的是计算属性的属性值才有效)。


        var vm = new Vue({
            el: "#app",
            data: {
                b: 100,
                c: 200,
            },
            computed: {
                // a: function () {
                //     let num = this.b + this.c;
                //     console.log("this.b+this.c", num);
                //     return num;
                // }

                a: {
                    // 默认执行的是get
                    get: function () { // 读取
                        return this.b + this.c
                    },
                    set: function (val) { // 设置
                        console.log("val", val);
                        this.b = val;
                    }
                }


            },
            methods: {
                setB() {
                    this.b = 200;
                    this.a = 20;
                }

            }
        })
    </script>

上述运行结果：

如果是：

则上述运行结果：

 注解：由此可见，set函数的参数是，修改后的computed里的属性的值

 如果是：

 则上述运行结果是：

 又如果是：

则上述运行结果是：

注解：因为实际上this.b最终被赋值为20

 2、reduce

 

//reduce() 接收 4个参数
//第一个参数  （累计器）
//第二个参数  当前值
//第三个参数  当前索引
//第四个参数  源数组
<script>
const arr = [1,2,3,4,5];
const sum = arr.reduce(function(prev,cur,index,arr){
    console.log(prev,cur,index);
    return prev + cur;
});
console.log('arr:',arr,'sum:',sum);
</script>

 上述运行结果：

注解：用reduce对这个数组进行求和，共迭代了4次，函数迭代的初始值是1，也就是默认值（数组的第一项），prev的值是每次计算后的值（上一次的累计器值+上一次的当前值）。