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 侦听器
计算属性和侦听器侧重的应用场景不同：
计算属性侧重于监听多个值的变化，最终计算并返回一个新值
侦听器侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值。

猜你喜欢：

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

什么是Vue过渡和动画？

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

Vue 的 template 是如何编译成真正的 HTML

乐鱼电竞web开发培训