sau交流學習社群—vue總結：使用vue的computed屬性實現監控變數變化，使用vue的watch屬性監控變數變...
摘要：
有時候遇到這麼個需求，輸入框為空的時候，請求一遍介面，如果輸入框不為空的時候，需要點選搜尋按鈕請求介面。
一、使用computed屬性的實時監控計算
我第一反應是做一個computed屬性監控這個輸入框的值，一旦監控發現值為空，我就重新執行一遍請求的方法。
<el-col...
有時候遇到這麼個需求，輸入框為空的時候，請求一遍介面，如果輸入框不為空的時候，需要點選搜尋按鈕請求介面。
一、使用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方法表示一個具體的操作，主要書寫業務邏輯；