首页技术文章正文

什么是watch侦听器?watch侦听器基本语法

更新时间:2021-10-25 来源:黑马程序员 浏览量:

IT培训班


watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。例如,监视用户名的变化并发 起请求,判断用户名是否可用。
watch 侦听器的基本语法
开发者需要在 watch 节点下,定义自己的侦听器。实例代码如下:

export default {

    data() {

return { username: ''}

  },

watch: {

//监听username的值的变化,

//形参列表中,第一个值是"变化后的新值”,第二个值是“变化之前的旧值”

username(newVal,oldval) {

console.log(newVal,oldVal)

  },

 },
 
}

使用 watch 检测用户名是否可用
监听 username 值的变化,并使用 axios 发起 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 选项

默认情况下,组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用,则需要使 用 immediate 选项。实例代码如下:

watch: {

// 1.监听username值的变化

username: {

// 2. handler属性是固定写法:当username变化是,调用handler

async handler(newVal, oldVal) {

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

console.log(res)},

},
//3.表示组件加载完毕后立即调用一次当前的 watch侦听器

immediate: true11 },

},


deep 选项

当 watch 侦听的是一个对象,如果对象中的属性值发生了变化,则无法被监听到。此时需要使用 deep 选项, 代码示例如下:
data() {

return {

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

}

},

watch: {

info: { //直接监听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值的变化无法被监听到

},

},


监听对象单个属性的变化

如果只想监听对象中单个属性的变化,则可以按照如下的方式定义 watch 侦听器:

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

  }
  
 },
 
watch: {

`info.username ' : {//只想监听info.username属性值的变化

async handler(newVal,oldval) {

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

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


计算属性 vs 侦听器
计算属性和侦听器侧重的应用场景不同:
计算属性侧重于监听多个值的变化,最终计算并返回一个新值
侦听器侧重于监听单个数据的变化,最终执行特定的业务处理,不需要有任何返回值。






猜你喜欢:

JavaScript中怎样创建Date对象?

servlet事件监听器工作步骤介绍

Vue3中Proxy实现数据监听的优势?

黑马程序员前端与移动开发培训

分享到:
在线咨询 我要报名
和我们在线交谈!