12.计算属性缓存 vs 方法---(vue入门 文档学习记录)

计算属性缓存 vs 方法

方法:

<div id="app12">
			<p>方法结果:{{revmessage()}}</p>
		</div>
		<script>
			var vm = new Vue({
				el:'#app12',
				data:{
					message:'hello'
				},
				methods:{
					revmessage:function(){
						return this.message.split('').reverse().join('');
					}
				}
			});
		</script>

计算属性的例子已经在上一节写过,那么我们对比一下这两种写法,当然这两种方法的效果是一样的,但是运行的原理是完全不一样的.

计算属性是通过响应系统通过绑定message的值,如果message的值改变则响应系统就会改变页面的值,如果值不改变,则不重新渲染页面.展示的仍然是页面之前缓存的数据,计算属性是基于它们的响应式依赖进行缓存的.

方法则是每次都会执行一次,每次都会重新渲染页面.

明显两种写法中计算属性的效率要高的多.

注:

计算属性是基于它们的响应式依赖进行缓存的—这句话怎样理解呢?

下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

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

也就是说计算属性只有依赖于vue实例中具有响应能力的属性时才能达到这种效果,这其实展示的是响应系统的一种可传递性,以及其可传递性的限制.

另:

computed:{
					revmessage:function(){						
						return this.message.split("").reverse().join("")+Date.now()
					}
				}	

这种的也可以响应,但不是完全响应式依赖,也可以满足某种需求,例如定时改变什么东西的时候.