Vue的computed与methods的区别

computed 计算属性与methods方法两种方式得到的结果确实是相同的，但不同的是，计算属性是基于它们的响应式依赖进行缓存的，即只有在相关相应依赖发生改变时才进行修改，不发生改变时，页面访问多少次都不会发生改变；看下面例子很容易得出。（例：将输入框的值反转输出）

		<input type="text" v-model="message"/>
		<p>反转的输入值：{{reversedMessage}}</p>
		<p>反转的输入值：{{reversedMessage}}</p>
		<p>{{reversedMessage1()}}</p>
		<p>{{reversedMessage1()}}</p>
	<script>
	export default {
		name: 'login',
		data() {
			return {
				message: ''
			}
		},
		computed: {
			reversedMessage: function(){
				console.log("computed");
				return this.message.split('').reverse().join('');
			}
		},
		methods: {
			reversedMessage1(){
				console.log("methods");
				return this.message.split('').reverse().join('');
			}
		}
	}
</script>

每次输入结果更改时，控制台输出结果： computed/methods/methods

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