# 計算屬性和method的對比 ``` <pre class="calibre29">``` <span class="token"><</span>h2<span class="token">></span><span class="token1">{</span><span class="token1">{</span><span class="token3">getfullname</span><span class="token1">(</span><span class="token1">)</span><span class="token1">}</span><span class="token1">}</span><span class="token"><</span>h2<span class="token">></span> <span class="token"><</span>h2<span class="token">></span><span class="token1">{</span><span class="token1">{</span><span class="token3">getfullname</span><span class="token1">(</span><span class="token1">)</span><span class="token1">}</span><span class="token1">}</span><span class="token"><</span>h2<span class="token">></span> <span class="token"><</span>h2<span class="token">></span><span class="token1">{</span><span class="token1">{</span><span class="token3">getfullname</span><span class="token1">(</span><span class="token1">)</span><span class="token1">}</span><span class="token1">}</span><span class="token"><</span>h2<span class="token">></span> <span class="token"><</span>h2<span class="token">></span><span class="token1">{</span><span class="token1">{</span><span class="token3">getfullname</span><span class="token1">(</span><span class="token1">)</span><span class="token1">}</span><span class="token1">}</span><span class="token"><</span>h2<span class="token">></span> <span class="token"><</span>h2<span class="token">></span><span class="token1">{</span><span class="token1">{</span>getfullname<span class="token1">}</span><span class="token1">}</span><span class="token"><</span>h2<span class="token">></span> <span class="token"><</span>h2<span class="token">></span><span class="token1">{</span><span class="token1">{</span>getfullname<span class="token1">}</span><span class="token1">}</span><span class="token"><</span>h2<span class="token">></span> <span class="token"><</span>h2<span class="token">></span><span class="token1">{</span><span class="token1">{</span>getfullname<span class="token1">}</span><span class="token1">}</span><span class="token"><</span>h2<span class="token">></span> <span class="token"><</span>h2<span class="token">></span><span class="token1">{</span><span class="token1">{</span>getfullname<span class="token1">}</span><span class="token1">}</span><span class="token"><</span>h2<span class="token">></span> 假設計算a<span class="token">+</span>b ``` ``` # 計算屬性和method的對比：、 假設要計算的屬性 不變的話 method上圖是被調用了四次 但是計算屬性發現要相加的數值沒有變化 只調用一次 如果改動a和b的值 她也會只調用一次 但是method仍然調用四次 # 所以 計算屬性的性能更高些 - - - - - - # 計算屬性緩存vs方法 將同一函數定義為計算屬性或者方法 得到的結果確實是完全相同 但是 不同的是 計算屬性是基于他們的響應式依賴進行緩存的 **只有相關響應式依賴發生改變的時候 他們才會重新賦值** 這就意味著 message變量只要還沒有發生改變 多次訪問計算方法 會立即返回之前計算結果 - - - - - - # \[計算屬性 vs 偵聽屬性\] Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變動：**偵聽屬性**。當你有一些數據需要隨著其它數據變動而變動時 # \[計算屬性的 setter\] ``` <pre class="calibre13">``` 計算屬性默認只有 getter，不過在需要時你也可以提供一個 setter： <span class="token">~</span><span class="token">~</span><span class="token">~</span> <span class="token6">// ...</span> computed<span class="token1">:</span> <span class="token1">{</span> fullName<span class="token1">:</span> <span class="token1">{</span> <span class="token6">// getter</span> <span class="token2">get</span><span class="token1">:</span> <span class="token2">function</span> <span class="token1">(</span><span class="token1">)</span> <span class="token1">{</span> <span class="token2">return</span> <span class="token2">this</span><span class="token1">.</span>firstName <span class="token">+</span> <span class="token4">' '</span> <span class="token">+</span> <span class="token2">this</span><span class="token1">.</span>lastName <span class="token1">}</span><span class="token1">,</span> <span class="token6">// setter</span> <span class="token2">set</span><span class="token1">:</span> <span class="token2">function</span> <span class="token1">(</span>newValue<span class="token1">)</span> <span class="token1">{</span> <span class="token2">var</span> names <span class="token">=</span> newValue<span class="token1">.</span><span class="token3">split</span><span class="token1">(</span><span class="token4">' '</span><span class="token1">)</span> <span class="token2">this</span><span class="token1">.</span>firstName <span class="token">=</span> names<span class="token1">[</span><span class="token5">0</span><span class="token1">]</span> <span class="token2">this</span><span class="token1">.</span>lastName <span class="token">=</span> names<span class="token1">[</span>names<span class="token1">.</span>length <span class="token">-</span> <span class="token5">1</span><span class="token1">]</span> <span class="token1">}</span> <span class="token1">}</span> <span class="token1">}</span> <span class="token6">// ...</span> <span class="token">~</span><span class="token">~</span><span class="token">~</span> 現在再運行<span><span class="token4">`vm.fullName = 'John Doe'`</span></span>時，setter 會被調用，<span><span class="token4">`vm.firstName`</span></span>和<span><span class="token4">`vm.lastName`</span></span>也會相應地被更新。 ``` ``` ### 項目中使用 ``` <pre class="calibre14">``` list<span class="token1">:</span><span class="token1">{</span> <span class="token2">get</span><span class="token1">(</span><span class="token1">)</span><span class="token1">{</span> console<span class="token1">.</span><span class="token3">log</span><span class="token1">(</span><span class="token4">"計算屬性get"</span><span class="token1">,</span><span class="token2">this</span><span class="token1">.</span>imgList<span class="token1">)</span><span class="token1">;</span> <span class="token2">return</span> <span class="token2">this</span><span class="token1">.</span>imglist <span class="token1">}</span><span class="token1">,</span> <span class="token2">set</span><span class="token1">(</span>newData<span class="token1">)</span><span class="token1">{</span> console<span class="token1">.</span><span class="token3">log</span><span class="token1">(</span><span class="token4">"計算屬性newdata"</span><span class="token1">,</span>newData<span class="token1">)</span><span class="token1">;</span> <span class="token2">return</span> newData <span class="token1">}</span> <span class="token1">}</span> ``` ```