Vue计算属性computed

计算属性

1. 在某些情况下，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来显示，就需要用到计算属性
2. 计算属性是写在实例的computed选项中的
3. 原理：底层借助了Object.defineproperty()方法提供的getter和setter
4. 优势：与method相比，计算属性computed有缓存机制，只要相关属性值不改变，就可以进行复用，提升效率
5. 若需要修改计算属性则必须使用setter进行修改，同时在set函数中必须要对计算属性所依赖的属性进行修改

计算属性基本使用

1. 计算属性本质上是一个属性

   	computed: {
   	    // 计算属性fullName
   		fullName() {
   			return ....
   		}
   	}
   

计算属性的setter和getter

1. 每一个计算属性都包含一个getter和一个setter
2. getter：当计算属性被读取时执行，返回值为计算属性的值
3. setter：当计算属性被修改时执行，set接受的传参为计算属性值，如：set(value) {}

   const vm = new Vue({
   	data() {
   		return {
   			firstName: '张',
   			lastName: '三'
   		}
   	},
   	computed: {
   		name() {
   			get() {
   				return this.firstName + this.lastName
   			},
   			set(value) {
   				console.log(value) // 当计算属性值被修改后调用setter，输出修改后的计算属性name值
   			}
   		}
   	}
   })
   

计算属性和methods对比

1. 计算属性和方法可以得到相同的结果
2. 不同的是
   1. 计算属性是基于响应式依赖进行缓存的，只在相关的值没有发生改变，多次访问计算属性都会返回原来缓存好的计算结果，而不会再次执行函数
   2. 而每一次调用方法都会再次执行函数，占用内存