接下來要來介紹 Vue 裡面的 computed(計算)& watch(監聽)
computed 的運用上，是我們要返回某個值且顯示到頁面上，會用到的
舉個例子，一樣先建構 Vue 的架構跟資料狀態:

<script>
var app = new Vue({
  el: '#app',
  data: {
    arrayData: [
      {
        name: '小明',
        age: 16
      },
      {
        name: '漂亮阿姨',
        age: 24
      },
      {
        name: '杰倫',
        age: 20
      }
    ],
    filterText: '',
    trigger: false,
    newDate: 0
  }
});
</script>

我們一樣來過濾資料，但這次不採用點擊任何按鈕的方式，我們要在 input 欄位內輸入文字時，就可以把那筆資料撈出來:

  <input type="text" class="form-control">
  <ul>
    <li v-for="(item, key) in arrayData" :key="item.age">
      {{ key }} - {{ item.name }} {{ item.age }} 歲 <input type="text">
    </li>
  </ul> 

正常這樣寫，我們就可以把每筆資料都顯示出來，但是為了要做到過濾功能，我們就可以使用 computed 功能來幫忙，
我們先在 input 元素上綁定先定義好的 filterText 資料，接著把 arrayData 換成 filterArray，不同於前面的是，這次 filterArray 已經不是我們先定義好的變數了，我們要藉由 computed 來產生，完成之後會如下:

  <input type="text" class="form-control" v-model="filterText">
  <ul>
    <li v-for="(item, key) in filterArray" :key="item.age">
      {{ key }} - {{ item.name }} {{ item.age }} 歲 <input type="text">
    </li>
  </ul> 

接著我們要在 Vue 裡面的 data 下方，增加一個 computed，並把要呈現的 filterArray 寫成一個 function 接著我們會 return 我們要的值，而要 return 的值，就是符合 filterText 的文字的資料，這時候一樣可以用到 .filter() 和 .match() 如下:

var app = new Vue({
    el: '#app',
    data: {},
    computed: {
        filterArray: function(){
            var vm = this;
            return vm.arrayData.filter(function(item){
                return item.name.match(vm.filterText);
            });
        }
    }
});

這個時候就會發現，功能已經如我們預期的完成了

接下來是 watch，watch 的運用上，是當我們監聽某個資料，當有變動時就會執行 function
一樣來個例子:

  <div class="box" :class="{'rotate': trigger }"></div>
  <button class="btn btn-outline-primary" @click="trigger = 'true'">Counter</button>

前面我們已經有先定義好 trigger 這個變數了，當我們點擊按鈕時，trigger 會變成 true 且 .box 會增加 .rotate 這個 class
而我們要監聽的就是 trigger 這個變數資料，我希望 3 秒之後，他的資料狀態回到 false 狀態
這時候在 Vue 裡面除了先前的 data 和 computed 之外，也需要增加一個 watch 了，而我們要監聽的就是 trigger 所以寫一個當 trigger 資料變動時要執行的 function

var app = new Vue({
    el: '#app',
    data: {},
    computed: {},
    watch: {
        trigger: function(){
            var vm = this;
            setTimeout(function(){
                vm.trigger = false
            },3000);
        }
    }
});

這時候當我們第一次點擊按鈕時，trigger 的資料狀態會變為 true 而 3 秒之後就會變回去 false 了