【Vue】computed與methods的差別＆ watch(監視)

computed

• methods的啟用需要仰賴「事件觸發」，但computed的則會直接return資料
• 每個computed的function都要return一個資料

vue

filterarray: function () {
                    var vm = this
                    return vm.alldata.filter(function (item) {
                        return vm.alldata.match(vm.filtertext)
                    })
                }

html

<p>使用 Computed 來過濾資料。</p>
          <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>

watch

• watch一但發現某個資料發生變化，立即啟用function

watch: {
        trigger: function () {  //監測trigger資料是否變化，就執行function
                  var vm = this
                  setTimeout(() => {
                        vm.trigger = false
                    }, 3000);
                }
            }

​