有時候遇到這麽個需求，輸入框為空的時候，請求一遍接口，如果輸入框不為空的時候，需要點擊搜索按鈕請求接口。

一、使用computed屬性的實時監控計算

我第一反應是做一個computed屬性監控這個輸入框的值，一旦監控發現值為空，我就重新執行一遍請求的方法。

<el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
   <el-input v-model="searchContent" placeholder="請輸入相關內容"></el-input>
</el-col>
<el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
    <el-button @click="search()" type="primary">搜索</el-button>
 </el-col>

 data () {
    return {
      searchContent: ‘‘
    }
  },

 computed: {
    searchContent: function () {
      if(!this.searchContent){
        this.getEventCategories();
      }
    }
  },

查找資料發現：1、計算屬性也是屬性，把他當做普通屬性，所以你在computed中定義searchContent屬性，在data中再次定義searchContent就會爆出重復定義的問題。

當我在data中不定義searchContent時候，

發現超出了瀏覽器棧最大的允許的大小，說明什麽呢，就是說，你陷入了無限循環，棧溢出了，發現就是計算屬性裏有計算屬性本身，循環計算這個屬性。

這時候自己才想起來，2、computed屬性就是一個普通屬性，唯一區別不同的地方就是：computed屬性裏的function裏的任何數據發生變化都會觸發這個屬性值的計算。

二、使用watch方法來實現檢測值的變化並且需要調用其他方法

最後自己只能使用watch方法來實現這個功能

  watch: {
    "searchContent": function () {
      
 
if(!this.searchContent){
        this.getEventCategories();
      }
    }
  },

這個時候在data裏還是需要定義searchContent這個變量，意思就是說，檢測searchContent的值變化，一旦發現這個值為空的時候就調用method的方法getEventCategories()。否則就不會調用這個方法。

最後上一張動態圖

三、總結

1、computed屬性的結果會被緩存，依賴的屬性如果發生變化才會重新計算，把他當做普通屬性來使用；

2、watch屬性，主要用來監聽某些特定數據的變化，從而進行某些具體的業務邏輯操作，可以把他看作是computed和methods的結合體；

3、methods方法表示一個具體的操作，主要書寫業務邏輯；

sau交流學習社區—vue總結：使用vue的computed屬性實現監控變量變化，使用vue的watch屬性監控變量變化從而實現其他業務