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

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)

  },

 }，
 
}

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

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 選項
默認情況下，組件在初次加載完畢后不會調(diào)用 watch 偵聽器。如果想讓 watch 偵聽器立即被調(diào)用，則需要使 用 immediate 選項。實例代碼如下：

watch: {

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

username: {

// 2. handler屬性是固定寫法:當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)用一次當前的 watch偵聽器

immediate: true11 }，

}，

deep 選項

當 watch 偵聽的是一個對象，如果對象中的屬性值發(fā)生了變化，則無法被監(jiān)聽到。此時需要使用 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è)重的應用場景不同：
計算屬性側(cè)重于監(jiān)聽多個值的變化，最終計算并返回一個新值
偵聽器側(cè)重于監(jiān)聽單個數(shù)據(jù)的變化，最終執(zhí)行特定的業(yè)務處理，不需要有任何返回值。

猜你喜歡：

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

什么是Vue過渡和動畫？

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

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

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