watch偵聽(tīng)器是什么？watch偵聽(tīng)器基本使用

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

export default {

    data() {

return { username: ''}

  }，

watch: {

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

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

username(newVal,oldval) {

console.log(newVal,oldVal)

  },

 }，
 
}

使用 watch 檢測(cè)用戶名是否可用
監(jiān)聽(tīng) username 值的變化，并使用 axios 發(fā)起 Ajax 請(qǐng)求，檢測(cè)當(dāng)前輸入的用戶名是否可用：

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 偵聽(tīng)器。如果想讓 watch 偵聽(tīng)器立即被調(diào)用，則需要使 用 immediate 選項(xiàng)。實(shí)例代碼如下：

watch: {

// 1．監(jiān)聽(tīng)username值的變化

username: {

// 2. handler屬性是固定寫(xiě)法:當(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偵聽(tīng)器

immediate: true11 }，

}，

deep 選項(xiàng)

當(dāng) watch 偵聽(tīng)的是一個(gè)對(duì)象，如果對(duì)象中的屬性值發(fā)生了變化，則無(wú)法被監(jiān)聽(tīng)到。此時(shí)需要使用 deep 選項(xiàng)， 代碼示例如下：

data() {

return {

info: { username: ' admin' }, // info 中包含username 
屬性1

}

},

watch: {

info: { //直接監(jiān)聽(tīng)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值的變化無(wú)法被監(jiān)聽(tīng)到

},

},

監(jiān)聽(tīng)對(duì)象單個(gè)屬性的變化

如果只想監(jiān)聽(tīng)對(duì)象中單個(gè)屬性的變化，則可以按照如下的方式定義 watch 偵聽(tīng)器：

 data() {
 
 return {
 
info: { username: 'admin ', password: "' }，//info中包含username屬性

  }
  
 },
 
watch: {

`info.username ' : {//只想監(jiān)聽(tīng)info.username屬性值的變化

async handler(newVal,oldval) {

const { data: res } = await axios.get( `https: / /ww.escook.cn/api/finduser /${newal}` )

console.log(res)
},
 }，
 },

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

猜你喜歡：

vue組件三大部分： template、script、style

什么是Vue過(guò)渡和動(dòng)畫(huà)？

Js語(yǔ)言解析：vue語(yǔ)言中的keep-alive

Vue 的 template 是如何編譯成真正的 HTML

傳智教育web開(kāi)發(fā)培訓(xùn)