教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

watch偵聽器是什么?watch偵聽器基本使用

更新時間:2021年10月26日10時03分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

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)

  },

 },
 
}

使用 watch 檢測用戶名是否可用
監(jiān)聽 username 值的變化,并使用 axios 發(fā)起 Ajax 請求,檢測當(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)情況下,組件在初次加載完畢后不會調(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)

當(dāng) watch 偵聽的是一個對象,如果對象中的屬性值發(fā)生了變化,則無法被監(jiān)聽到。此時需要使用 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ù)處理,不需要有任何返回值。






猜你喜歡:

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

什么是Vue過渡和動畫?

Js語言解析:vue語言中的keep-alive

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

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

0 分享到:
和我們在線交談!