computed

computed是计算属性，也是一个配置项

当一个数据是由若干个data中的数据计算而来，可以使用computed

原理：底层借助了Objcet.defineproperty()方法提供的getter和setter

与methods实现相比，内部有缓存机制（复用），效率更高，调试方便

1.基本语法

1.1 定义

computed是一个对象，其中可包含若干个计算属性，每个计算属性都是一个方法，需要return返回一个值

computed中的数据会被挂载到组件实例上，在js环境中可通过this访问，在视图中可在直接使用

<template>
	<div>
        {{ total }}
    </div>
</template>

<script>
export default {
    data(){
        return{
            num1: 11,
            num2: 22
        }
    },
    computed:{
        total(){
			return this.num1 + this.num2
        }
    }
}
</script>

1.2 访问

计算属性是一个方法，但我们不能直接使用，只可以访问

在js环境中，虽然计算属性是一个有返回值的方法，但是访问时不能写()

<script>
export default {
    data(){
        return{
            num1: 11,
            num2: 22
        }
    },
    computed:{
        total(){
			return this.num1 + this.num2
        }
    },
    methods:{
        fn(){
			console.log(this.total)
        }
    }
}
</script>

TIP

计算属性不可以直接修改其值，当计算属性依赖的值改变时，计算属性的值会自动更新

依赖的值也就是计算属性中所用到的data中的数据

2.set和get

在computed中，计算属性除了可以写成方法，也可以写成对象，对象里只能包含set()和get()两个函数

computed:{
	FnNameCp:{	//计算属性名
		get(){
			return xxx
		},
		set(data){
			//...
		},
	},
},

set()和get()函数的执行时机如下

• set：当计算属性被篡改时，接受一个参数，即改变后的新值
• get：初次读取时会执行一次，当依赖的数据发生改变时会被再次调用

get()就相当于计算属性简写的函数

3.缓存机制

计算属性第一次调用之后就会缓存到计算机中，后面再次调用时，计算属性的方法不会执行，而是直接返回值

但是当计算属性被篡改时，才会重新执行计算属性的方法