详解Vue计算属性computed

computed计算属性

本文从三个方面去讲解computed计算属性

1、计算属性的getter函数

2、计算属性的setter函数

3、计算属性的cache缓存属性

定义：当computed中引用（依赖）的变量发生变化时，computed声明的变量也会重新计算，计算完成后将结果存入缓存，computed中定义的属性会直接挂载在this下，初始化加载时，data执行优先级在computed之上

举例：

1、计算属性的getter函数

举例：

data(){ 
	return{
		a:1,
		b:2,
		c:3
	}
 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    bDouble:{
      get(){
			return this.b * this.c
		}
    },
  },
  methods:{
	getChange(){
			console.log(this.aDouble) //调用函数时输出2
			console.log(this.bDouble) //调用时输出6
		}
	}

当computed下属性值为方法时，他会默认使用属性下的getter方法

也就是说

	aDouble: function () {
      return this.a * 2
    }
   //等同于
   aDouble: {
	   	get(){
			return this.a * 2
		}
    }

当computed中依赖值a发生变化时，aDouble属性，也会重新计算，当a=2时，aDouble==4

2、计算属性的setter函数

data(){ 
	return{
		b:2,
		c:3
	}
 },
  computed: {
    // 仅读取
    bDouble:{
        get(){
			return this.b * this.c
		},
		set(newValue){ // 当重新给bDouble赋值时触发
			alert(newValue)
            this.b = newValue
		}
    },
  },
  methods:{
	getChange(){
                console.log(this.b)//调用时输出2
                console.log(this.bDouble) //调用时输出6
                this.bDouble = 3//重新赋值bDouble  触发bDouble中的set方法，弹窗，并改变b的值
                console.log(this.b) //弹窗后输出3
                console.log(this.bDouble) //弹窗后输出9
            }
	}
}

实例中，页面初始化时，bDouble首次计算为 b * c ，当重新给bDouble赋值时 (this.bDouble = 3)，触发了bDouble的set方法给b重新赋值为3，计算属性监听到依赖值b发生变化，故重新计算了一次，得出bDouble结果为新赋值的 b*c ，结果为9

3、计算属性的cache缓存属性

举例：

computed: {
            bDouble:{
                cache: false, //false关闭true开启
                get(){
                    return Date.now() + '--------'
                }
            },
        },
        created(){
            setInterval(()=>{
                console.log(this.bDouble)
            },5000)
        }

该例中cache依赖为当前时间的时间戳。

在生命周期中创建setInterval，每五秒打印一次bDouble

输出结果

当 cache 缓存开启时，计算属性会使用缓存中的数据

输出结果：

默认cache为true