# 计算属性和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> ``` ```