vue總結：computed屬性實現監控變數變化，watch屬性監控變數變化從而實現其他業務...

weixin_34249678發表於2018-11-30
Vue變數

有時候遇到這麼個需求，輸入框為空的時候，請求一遍介面，如果輸入框不為空的時候，需要點選搜尋按鈕請求介面。

同步sau交流學習社群：www.mwcxs.top/page/464.ht…

一、使用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方法表示一個具體的操作，主要書寫業務邏輯；



相關文章