以前對于watch和computed的應(yīng)用都是知其然而不知其所以然,只是有個模糊的概念.現(xiàn)在有個需求就是兩個數(shù)字類型的input框,對比綁定值得大小,來控制div的顯示與隱藏;
我在想是用watch還是computed,本身這個需求計算屬性和監(jiān)聽屬性都具有.
先上解決辦法,再說兩者的區(qū)別
要求maxValue要大于minValue,以下是提取的代碼片段
//先在data定義兩個變量:
<input v-model="minValue"></input>
<input v-model="maxValue"></input>
<div v-if="showTxt "></div>
data(){
return{
minValue:1,
maxValue:2,
showTxt :false
}
},
computed: {
result() {
let result = this..maxValue-this.minValue;
return result;
}
},
watch:{
result(newV,oldV){
if(newV>0){
this.showTxt = false;
}else{
this.showTxt = true;
}
}
},
我的解決辦法是通過計算屬性,把兩個值綁在一起,再通過watch來監(jiān)聽他們的大小變化,來控制div的顯示隱藏
那么watch和computed有什么區(qū)別嗎
computed
設(shè)計computed的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護,例如:
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
應(yīng)用computed:
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
})
watch
vue 提供了一種更通用的方式來觀察和響應(yīng) Vue 實例上的數(shù)據(jù)變動：偵聽屬性气笙。
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
那么二者有什么具體區(qū)別
watch適合處理的場景是暴构，偵聽一個數(shù)的變化救氯，當(dāng)該數(shù)據(jù)變化蹄溉，來處理其他與之相關(guān)數(shù)據(jù)的變化（該數(shù)據(jù)影響別的多個數(shù)據(jù)）
computed適合處理的場景是馁龟，獲得一個值或者結(jié)果俭令，該結(jié)果受其他的依賴的影響。
Computed 的響應(yīng)是 deep 的響應(yīng)内狗，即在計算過程中用到的對象的屬性發(fā)生變化怪嫌，是可以被監(jiān)聽到的。
Watch 的響應(yīng)默認(rèn)為非 deep 的響應(yīng)柳沙，即觀測的是某個對象的字面量岩灭。當(dāng)然，我們可以為 Watch 設(shè)置 deep 響應(yīng)類型或是監(jiān)聽其屬性
