# 計算屬性 vs 偵聽屬性 watch Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變動：**偵聽屬性**。當你有一些數據需要隨著其它數據變動而變動時，你很容易濫用`watch`——特別是如果你之前使用過 AngularJS。然而，通常更好的做法是使用計算屬性而不是命令式的`watch`回調 ``` <pre class="calibre13">``` <span class="token"><</span>div id<span class="token">=</span><span class="token4">"demo"</span><span class="token">></span><span class="token1">{</span><span class="token1">{</span> fullName <span class="token1">}</span><span class="token1">}</span><span class="token"><</span><span class="token">/</span>div<span class="token">></span> ``` ``` ``` <pre class="calibre13">``` <span class="token2">var</span> vm <span class="token">=</span> <span class="token2">new</span> <span class="token3">Vue</span><span class="token1">(</span><span class="token1">{</span> el<span class="token1">:</span> <span class="token4">'#demo'</span><span class="token1">,</span> data<span class="token1">:</span> <span class="token1">{</span> firstName<span class="token1">:</span> <span class="token4">'Foo'</span><span class="token1">,</span> lastName<span class="token1">:</span> <span class="token4">'Bar'</span><span class="token1">,</span> fullName<span class="token1">:</span> <span class="token4">'Foo Bar'</span> <span class="token1">}</span><span class="token1">,</span> watch<span class="token1">:</span> <span class="token1">{</span> firstName<span class="token1">:</span> <span class="token2">function</span> <span class="token1">(</span>val<span class="token1">)</span> <span class="token1">{</span> <span class="token2">this</span><span class="token1">.</span>fullName <span class="token">=</span> val <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> lastName<span class="token1">:</span> <span class="token2">function</span> <span class="token1">(</span>val<span class="token1">)</span> <span class="token1">{</span> <span class="token2">this</span><span class="token1">.</span>fullName <span class="token">=</span> <span class="token2">this</span><span class="token1">.</span>firstName <span class="token">+</span> <span class="token4">' '</span> <span class="token">+</span> val <span class="token1">}</span> <span class="token1">}</span> <span class="token1">}</span><span class="token1">)</span> ``` ```