什么是watch偵聽器？watch偵聽器基本語法

watch 偵聽器允許開發(fā)者監(jiān)視數(shù)據(jù)的變化，從而針對(duì)數(shù)據(jù)的變化做特定的操作。例如，監(jiān)視用戶名的變化并發(fā) 起請(qǐng)求，判斷用戶名是否可用。
watch 偵聽器的基本語法
開發(fā)者需要在 watch 節(jié)點(diǎn)下，定義自己的偵聽器。實(shí)例代碼如下：

export default {

    data() {

return { username: ''}

  }，

watch: {

//監(jiān)聽username的值的變化，

//形參列表中，第一個(gè)值是"變化后的新值”，第二個(gè)值是“變化之前的舊值”

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)情況下，組件在初次加載完畢后不會(huì)調(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對(duì)象的變化

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)聽對(duì)象單個(gè)屬性的變化

如果只想監(jiān)聽對(duì)象中單個(gè)屬性的變化，則可以按照如下的方式定義 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)
},
 }，
 },

計(jì)算屬性 vs 偵聽器
計(jì)算屬性和偵聽器側(cè)重的應(yīng)用場景不同：
計(jì)算屬性側(cè)重于監(jiān)聽多個(gè)值的變化，最終計(jì)算并返回一個(gè)新值
偵聽器側(cè)重于監(jiān)聽單個(gè)數(shù)據(jù)的變化，最終執(zhí)行特定的業(yè)務(wù)處理，不需要有任何返回值。






猜你喜歡：

JavaScript中怎樣創(chuàng)建Date對(duì)象？

servlet事件監(jiān)聽器工作步驟介紹

Vue3中Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽的優(yōu)勢？

黑馬程序員前端與移動(dòng)開發(fā)培訓(xùn)