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

weixin_34249678發表於2018-11-30

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

同步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方法表示一個具體的操作,主要書寫業務邏輯;



相關文章