vue计算属性的缓存

vue计算属性能做到的, 方法也能做到, 但计算属性是依赖于缓存的, 只要绑定属性不改变, 那么它就不会重新计算直接使用上一次的值, 而方法是每次调用均会计算.

请看下面这个实例,

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<h2>计算属性缓存的例子</h2>
<p>count初始值:<span id="count"></span></p>
<div id="example">
	<p>第一次计算属性: "{{ reversedMessage }}"</p>
	<p>第一次调用方法: "{{ reversedMessage2() }}"</p>
	<h2>分别查看count的值</h2>
	<p>再看一下计算属性{{reversedMessage}}</p>
	<p>再调用一次方法{{reversedMessage2()}}</p>
</div>
<script>
		let count = 1;
		document.getElementById("count").innerText=count;
		var vm = new Vue({
		  el: '#example',
		  data: {
			message: 'Hello'
		  },
		  computed: {
			// 计算属性的 getter
			reversedMessage: function () {
				count++;
			  return "count: "+count+',value: '+this.message.split('').reverse().join('');
			}
		  },
		  methods:{
				reversedMessage2: function () {
					count++;
				  return "count: "+count+',value: '+this.message.split('').reverse().join('')
				}
		  }
		});
</script>

可以看到, 每调用一次方法, 都会重新计算, 而多次调用计算属性得到的结果, 当且仅当属性变化时才重新计算.

如果你希望节省性能, 使用计算属性, 若不需要缓存, 则使用方法.