Vue：计算属性缓存VS方法

用法：

1. 在html中

1. 计算属性：

<p>使用计算属性reversedMsg的写法：{{reversedMsg}}</p>

2. 方法：

<p>使用方法reversedMsg的写法：{{reversedMsg()}}</p>

2. 在组件中

1. 计算属性：

computed: {
	reversedMsg: function(){
		return this.message.split('').reverse().join('')
	}
}

2. 方法：

methods: {
	reversedMsg: function(){
		return this.message.split('').reverse().join('')
	}
}

上面两种写法其实一样

区别

**不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生变化时彩绘重新求值。**这意味着message（上述例子中计算属性的响应式依赖）没有发生改变时，多次访问计算属性reversedMsg，计算属性会返回之前的计算结果，不会再次执行函数。
而，每当触发重新渲染时（message更新时），调用方法总会再次执行函数。

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

计算属性案例：

computed: {
	now: function() {
		return Date.now()
	}
}

这个案例中，调用这个计算属性时，会执行函数返回当前时间。但后续不会有相关响应式依赖的改变（Date.now()不是响应式依赖），所以这个计算属性不会在更新。

参考🔗：计算属性和侦听器