一、计算属性
1、模版内的表达式非常便利,但是设计它们的初衷是用于简单计算的。在模版中放入太多的逻辑运算会让模版过重且难以维护,例如如下代码:
<div id="example"> ?{{ message.split(‘‘).reverse().join(‘‘) }}</div>在这个地方,模版不在是简单的声明式逻辑,你必须看一段时间才能意识到,这里是想要显示变量message的翻转字符串,当你想要在模版中多次引用此处的翻转字符串时,就会更加难以处理.
所以,任何复杂逻辑，你都应当使用计算属性,基础例子如下:
<body> ???<div id="currentPage"> ???????<p>Original message:"{{message }}"</p> ???????<p>Computed reversed message:"{{reversedMessage }}"</p> ???</div></body><script type="text/javascript"> ???var currPage=new Vue({ ???????el:"#currentPage", ???????data:{ ???????????message:"https://www.baidu.com" ???????}, ???????computed:{ ???????????reversedMessage:function () { ???????????????return this.message.split(‘‘).reverse().join(‘‘) ???????????} ???????} ???});</script>2、计算属性缓存vs方法
上面的功能通过方法也可以实现,但是通过方法和计算属性实现相同的功能是有区别的,虽然两种计算方式的最终结果完全相同.
Vue.js系列之四计算属性和观察者
原文地址：http://www.cnblogs.com/GreenLeaves/p/7853244.html