Computed vs Methods

昨天已经把JSON档建置好了!今天就可以取用JSON档的资料然後实作出Methods和Computed的差别

首先要注意的是，我们要取得JSON档的资料需要利用Axios发送GET请求，所以在这里我们需要加入Axios的CDN

<!-- Axios 的 CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>

进入实作前我们先来看一段官网对於Computed和Methods的比较

the difference is that computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed. In comparison, a method invocation will always run the function whenever a re-render happens. In cases where you do not want caching, use a method instead.

从官网中我们可以知道computed他具有缓存的机制，也就是当你的原始资料没有做改变时它就会cache住，都不会重新去做计算，但是Methods没有缓存的机制所以只要呼叫一次就会重新计算一次，所以如果希望资料不要缓存的话就使用methods

接下来我们用实际的例子开Console来比较看看就更能体会他们的差异了!

从Console中，我们可以看出Methods属性只要我们切换一个类别时它就会重新去计算一次，但是computed是当我们切换类别时他都不会有任何动静，也就是说它不会因为切换而重新去计算，当然这是因为在今天的范例中，computed的部分使用的是用下拉式选单去做选取，所以没有让使用者去做资料的修改，才会在使用computed的属性时永远都不会重新算