Vue中的计算属性computed

今天我们来学习传入 new Vue()的对象的新的一个属性computed计算属性，里面有两种用法：

1、当方法使用，用于处理数据源中的数据；

2、直接当作vm对象的属性用

接下来我们一一说明

当作方法使用时，直接在方法内直接操作data数据源中的数据，然后用于渲染；而且会监听计算属性中使用到的数据源，然后把计算的结果缓存，如果监听的数据源发生了变化才会重新计算 ，否则直接使用缓存的数据。

这也是computed与methods、filters的区别，当数据源中的数据发生改变时会重新渲染页面并且会再次调用在methods和filters中用到的方法，但是修改的数据源的数据如果computed中的方法没有用到，则不会调用computed的方法，computed内的方法只有当监听的数据源发生变化时才会从新调用。

写个代码证实一下：

 <div id="box">
        <button @click="a">修改msg</button>
        {{msg}}
        {{|b}}
        {{c}}

    </div>

    <script>
        new Vue({
            el:"#box",
            data:{
                msg:"666"
            },
            methods: {
                a(){
                    console.log("从新调用了methods");
                    this.msg="777"
                }
            },
            filters:{
                b(){
                    console.log("从新调用了filters");
                }
            },
          computed:{
                c(){
                    console.log("从新调用了computed");
                },
          }
        })
    </script>

当点击按钮修改msg的值时，控制台 不会打印"从新调用了computed"

效果：

 

注意：在computed和methods可以通过this.数据属性的方法直接获取或修改data中的数据，但是filters中不能，我们在filters的方法需要用到data中的数据，只能通过调用时传参的形式传入使用。

缓存是计算属性最显著的特点也是其的优点，计算属性会把使用到的data中的属性缓存起来，防止页面发生大量重复计算， 提升js 运行效率，但是这也是其的缺点，为什么这么说呢？

 缺点：如果简单的运算也用计算属性或者全部方法都放在计算属性中 反而会增加资源消耗(计算属性会去监听计算的值 而且会缓存计算的结果 )  比如生日转年龄这种简单运算，我们在做项目时选择合适的属性写我们的方法，计算属性一般用在计算商品总价中。

我们用计算属性来实现一下出生日期转换岁数：

 <div id="box">
        {{getyear}}
    </div>

    <script>
        new Vue({
            el:"#box",
            data:{
                msg:"1999-9-9"
            },
          computed:{
            getyear(){
                return new Date().getFullYear()-new Date(this.msg).getFullYear()+"岁"
            }
          }
        })
    </script>

计算属性使用时当做属性使用

会跟data内的属性一样会被劫持到vm对象中。

写法：

xxx:{
	get(){},
	set(v){}
}

xxx为我们定义的属性名；

get在取属性值时调用，get方法内return一个返回值，这个返回值就是我们取到的数据；

set在给属性赋值时调用，形参v接收我们设置的值。

代码演示一下：

 <div id="box">
        <button @click="changenum">修改num</button>
        {{num}}

    </div>

    <script>
        new Vue({
            el:"#box",
            data:{
                num1:111
            },
            methods: {
                changenum(){
                    this.num=222
                }
            },
          computed:{
                num:{
                    set(v){
                        this.num1=v
                    },
                    get(){
                        console.log(this.num1);
                        return this.num1
                    }
                }
          }
        })
</script>

在初始页面时，{{num}}取到计算属性中的num，get返回的num1，所以页面显示111；

当点击按钮修改num时，会从新修改num1的值。