更新時間:2021年10月26日10時03分 來源:傳智教育 瀏覽次數(shù):
watch 偵聽器允許開發(fā)者監(jiān)視數(shù)據(jù)的變化,從而針對數(shù)據(jù)的變化做特定的操作。例如,監(jiān)視用戶名的變化并發(fā) 起請求,判斷用戶名是否可用。
watch 偵聽器的基本語法
開發(fā)者需要在 watch 節(jié)點(diǎn)下,定義自己的偵聽器。實(shí)例代碼如下:
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 選項(xiàng)
默認(rèn)情況下,組件在初次加載完畢后不會調(diào)用 watch 偵聽器。如果想讓 watch 偵聽器立即被調(diào)用,則需要使 用 immediate 選項(xiàng)。實(shí)例代碼如下:
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 選項(xiàng)
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 選項(xiàng),否則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ù)處理,不需要有任何返回值。