更新時間:2021-10-25 來源:黑馬程序員 瀏覽量:
watch 偵聽器允許開發(fā)者監(jiān)視數(shù)據(jù)的變化,從而針對數(shù)據(jù)的變化做特定的操作。例如,監(jiān)視用戶名的變化并發(fā) 起請求,判斷用戶名是否可用。
watch 偵聽器的基本語法
開發(fā)者需要在 watch 節(jié)點下,定義自己的偵聽器。實例代碼如下:
export default {
data() {
return { username: ''}
},
watch: {
//監(jiān)聽username的值的變化,
//形參列表中,第一個值是"變化后的新值”,第二個值是“變化之前的舊值”
username(newVal,oldval) {
console.log(newVal,oldVal)
},
},
}
import axios from 'axios'
export default {
data() {
return { username: '' }
},
watch:{
async username(newVal, oldVal) {
const { data: res } = await axios.get(`https://www.escook.cn/api/finduser/${newNal}`)
console.log(res)
},
},
}
immediate 選項
默認(rèn)情況下,組件在初次加載完畢后不會調(diào)用 watch 偵聽器。如果想讓 watch 偵聽器立即被調(diào)用,則需要使 用
immediate 選項。實例代碼如下:
watch: {
// 1.監(jiān)聽username值的變化
username: {
// 2. handler屬性是固定寫法:當(dāng)username變化是,調(diào)用handler
async handler(newVal, oldVal) {
const { data: res } = await axios.get( `https://ww.escook.cn/api/finduser/${newVal} `)
console.log(res)},
},
//3.表示組件加載完畢后立即調(diào)用一次當(dāng)前的 watch偵聽器
immediate: true11 },
},
deep 選項
data() {
return {
info: { username: ' admin' }, // info 中包含username
屬性1
}
},
watch: {
info: { //直接監(jiān)聽info對象的變化
async handler (newVal,
oldVal) {
const { data: res } = await axios . get(、https:/ /www . escook. cn/
api/ finduser /${newVal . username}、)
console. log(res)
deep: true
//需要使用deep 選項,否則username值的變化無法被監(jiān)聽到
},
},
監(jiān)聽對象單個屬性的變化
如果只想監(jiān)聽對象中單個屬性的變化,則可以按照如下的方式定義 watch 偵聽器:
data() {
return {
info: { username: 'admin ', password: "' },//info中包含username屬性
}
},
watch: {
`info.username ' : {//只想監(jiān)聽info.username屬性值的變化
async handler(newVal,oldval) {
const { data: res } = await axios.get( `https: / /ww.escook.cn/api/finduser /${newal}` )
console.log(res)
},
},
},
計算屬性 vs 偵聽器
計算屬性和偵聽器側(cè)重的應(yīng)用場景不同:
計算屬性側(cè)重于監(jiān)聽多個值的變化,最終計算并返回一個新值
偵聽器側(cè)重于監(jiān)聽單個數(shù)據(jù)的變化,最終執(zhí)行特定的業(yè)務(wù)處理,不需要有任何返回值。
猜你喜歡:
JavaScript中怎樣創(chuàng)建Date對象?