watch 偵聽器
-
1.方法格式的偵聽器
const vm = new Vue({
el: '#app',
data: {
username: 'admin'
},
// 所有的偵聽器，都應(yīng)該被定義到 watch 節(jié)點下
watch: {
// 偵聽器本質(zhì)上是一個函數(shù)，要監(jiān)視哪個數(shù)據(jù)的變化，就把數(shù)據(jù)名作為方法名即可
// 新值在前，舊值在后
username(newVal) {
if (newVal === '') return
// 1. 調(diào)用 jQuery 中的 Ajax 發(fā)起請求，判斷 newVal 是否被占用?。。? $.get('https://www.escook.cn/api/finduser/' + newVal, function (result) {
console.log(result)
})
}
}
})
- 缺點1：無法在剛進入頁面的時候，自動觸發(fā)！?。?/li>
- 缺點2：如果偵聽的是一個對象，如果對象中的屬性發(fā)生了變化，不會觸發(fā)偵聽器?。?！
-
2.對象格式的偵聽器
- 好處1：可以通過 immediate 選項，讓偵聽器自動觸發(fā)?。?！
const vm = new Vue({
el: '#app',
data: {
username: 'admin'
},
// 所有的偵聽器，都應(yīng)該被定義到 watch 節(jié)點下
watch: {
// 定義對象格式的偵聽器
username: {
// 偵聽器的處理函數(shù)
handler(newVal, oldVal) {
console.log(newVal, oldVal)
},
// immediate 選項的默認值是 false
// immediate 的作用是：控制偵聽器是否自動觸發(fā)一次！
immediate: true
}
}
})
- 好處2：可以通過 deep 選項，讓偵聽器深度監(jiān)聽對象中每個屬性的變化?。?！
const vm = new Vue({
el: '#app',
data: {
// 用戶的信息對象
info: {
username: 'admin',
address: {
city: '北京'
}
}
},
// 所有的偵聽器，都應(yīng)該被定義到 watch 節(jié)點下
watch: {
info: {
handler(newVal) {
console.log(newVal)
},
// 開啟深度監(jiān)聽，只要對象中任何一個屬性變化了，都會觸發(fā)“對象的偵聽器”
deep: true
}
}
})
簡寫:
const vm = new Vue({
el: '#app',
data: {
// 用戶的信息對象
info: {
username: 'admin',
address: {
city: '北京'
}
}
},
// 所有的偵聽器，都應(yīng)該被定義到 watch 節(jié)點下
watch: {
// 如果要偵聽的是對象的子屬性的變化，則必須包裹一層單引號
'info.username'(newVal) {
console.log(newVal)
}
}
})
計算屬性computed
特點：
- 定義的時候，要被定義為“方法”
- 在使用計算屬性的時候，當普通的屬性使用即可
好處： - 實現(xiàn)了代碼的復(fù)用
- 只要計算屬性中依賴的數(shù)據(jù)源變化了，則計算屬性會自動重新求值！
<body>
<div id="app">
<div>
<span>R：</span>
<input type="text" v-model.number="r">
</div>
<div>
<span>G：</span>
<input type="text" v-model.number="g">
</div>
<div>
<span>B：</span>
<input type="text" v-model.number="b">
</div>
<hr>
<!-- 專門用戶呈現(xiàn)顏色的 div 盒子 -->
<!-- 在屬性身上，: 代表 v-bind: 屬性綁定 -->
<!-- :style 代表動態(tài)綁定一個樣式對象，它的值是一個 { } 樣式對象 -->
<!-- 當前的樣式對象中，只包含 backgroundColor 背景顏色 -->
<div class="box" :style="{ backgroundColor: rgb }">
{{ rgb }}
</div>
<button @click="show">按鈕</button>
</div>
<script>
// 創(chuàng)建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
// 紅色
r: 0,
// 綠色
g: 0,
// 藍色
b: 0
},
methods: {
// 點擊按鈕，在終端顯示最新的顏色
show() {
console.log(this.rgb)
}
},
// 所有的計算屬性，都要定義到 computed 節(jié)點之下
// 計算屬性在定義的時候，要定義成“方法格式”
computed: {
// rgb 作為一個計算屬性，被定義成了方法格式，
// 最終，在這個方法中，要返回一個生成好的 rgb(x,x,x) 的字符串
rgb() {
return `rgb(${this.r}, ${this.g}, ${this.b})`
}
}
});
console.log(vm)
</script>
</body>
watch、computed和methods`之間的對比：
- watch一個對象，鍵是需要觀察的表達式，值是對應(yīng)回調(diào)函數(shù)。主要用來監(jiān)聽某些特定數(shù)據(jù)的變化，從而進行某些具體的業(yè)務(wù)邏輯操作；可以看作是computed和methods的結(jié)合體；-
- computed屬性的結(jié)果會被緩存，除非依賴的響應(yīng)式屬性變化才會重新計算。主要當作屬性來使用；
