最近在學習VUE的時候，發現computed與methods的作用很像，而且一些網站上也說這兩種可以互相替換使用，但實際上在用的時候，發現其實這兩者之間還是有區別的。

computed 計算屬性

    可用於定義屬性的setter和getter方法，一般如果不特意強調的話，申明出來的會被自動當做屬性的getter方法呼叫，也就是說computed中雖然定義的時候，形式和方法很像，其實定義的是屬性，可以採用屬性的方法去使用，如果採用方法的方式去使用(加上括號)就會報錯。

比如：

<div id="app">
	<p>{{message}}</p>
	<p>{{reversemessage}}</p>
</div>

var app = new Vue(
	{
		el:"#app",
		data:{message:"hello world!",
		},
		computed:{
			reversemessage:function(){
				return this.message.split('').reverse().join('');
			}
		}
	}
);
 

那如果我們在data中定義一個與reversemessage同名的屬性呢，它的顯示結果就是data中這個值的資料，就不會呼叫計算屬性中定義的setter和getter方法了。

而methods是方法，他的呼叫方式遵循方法的呼叫方式，必須要帶個括號才行，否則會報錯。但同樣能夠達到與上述計算屬性同樣的效果。

<div id="app">
	<p>{{message}}</p>
	<p>{{reversemessage()}}</p>
</div>

var app = new Vue(
	{
		el:"#app",
		data:{message:"hello world!",
		},
		methods:{
			reversemessage:function(){
				return this.message.split('').reverse().join('');
			}
		}
	}
);
 

那如果我們同事定義一個同名計算屬性和方法會怎樣？

比如這樣？你會發現這樣引用會報錯的，只有methods中的方法可用，計算屬性就失去意義了。

<div id="app">
	<p>{{message}}</p>
	<p>{{reversemessage}}</p>
</div>

var app = new Vue(
	{
		el:"#app",
		data:{message:"hello world!",
		},
		computed:{
			reversemessage:function(){
				return this.message.split('').reverse().join('');
			}
		},
       methods:{
			reversemessage:function(){
				return this.message.split('').reverse().join('');
			}
		}
	}
);
 

他們除了引用方法上不同外，還有一個最大的區別：

計算屬性是基於它們的依賴進行快取的。只在相關依賴發生改變時它們才會重新求值。這就意味著只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函式。

相比之下，每當觸發重新渲染時，呼叫方法將總會再次執行函式。

計算屬性比較適用於需要消耗很大效能，或者結果依賴於大量資料的數值，比如一個非常複雜的數值A需要經過非常複雜的計算流程和大量資料才能計算出來，我們不希望每次介面重新渲染時都計算一遍A的數值，就可以用計算屬性來儲存A，這樣就可以避免每次被重新計算。

over~