计算属性

基本用法

计算属性指的是通过一系列运算后，最终得到一个属性值。

这个动态计算出来的属性值可以被模板结构或methods方法使用。

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
const vm = new Vue({
	el: '#app',
	data: {
		r: 0, g: 0, b: 0
	},
    computed: {
		rgb() { return `rgb(${this.r}, ${this.g}, ${this.b})`}
    },
	methods: {
		show() { console.log(this.rgb) }
	}
})

计算属性的特点

  1. 虽然计算属性声明时被定义为方法，但是计算属性的本质是一个属性。
  2. 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行计算。