Vue2：计算属性（computed）

计算属性computed

把computed中的方法当做属性使用,会返回一个数据供使用

 

什么是计算属性？

计算属性就是处理数据源中的数据，用于渲染  ，而且会监听计算属性中使用到的数据源，然后把计算的结果进行缓存；

如果监听的数据源发生了变化  才会重新计算  否则直接使用缓存的数据

 

语法：

new Vue({
    el:"",//关联界面元素
    data:{},//vm的数据源
    methods:{},//方法
    filters:{qq(){}},//过滤器
    computed:{xx(){}} //xx就是一个计算属性
})

 

计算方法：

//计算属性第一种用法
getAge_computed(){
    var age = new Date().getFullYear() - new Date(this.birth).getFullYear()
    return age + "岁"
}

//计算属性第二种用法
xx:{
    set(oldvalue){},
    get(){}
}

 

计算属性和方法的区别:(面试)

计算属性会把使用到的data中的属性缓存起来，防止页面发生大量重复计算，提升js 运行效率,如果计算属性中使用到的data中那部分数据变了才会重新调用计算属性

methods方法没有计算结果缓存起来，data任何数据发生改变，方法都会被重新调用一遍

方法常常是作用的事件使用,计算属性常常是动态计算结果时使用

计算属性的缺点：

1、如果简单的运算也用计算属性 ，而会增加资源消耗(计算属性会去监听计算的值 而且会缓存计算的结果 )  比如生日转年龄时　　解决方案：可以用过滤器

2、异步中无法监听数据　　解决方案：watch监听器