更新时间:2021-10-25 来源:黑马程序员 浏览量:
watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。例如,监视用户名的变化并发 起请求,判断用户名是否可用。
watch 侦听器的基本语法
开发者需要在 watch 节点下,定义自己的侦听器。实例代码如下:
export default {
data() {
return { username: ''}
},
watch: {
//监听username的值的变化,
//形参列表中,第一个值是"变化后的新值”,第二个值是“变化之前的旧值”
username(newVal,oldval) {
console.log(newVal,oldVal)
},
},
}
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 选项
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 侦听器
计算属性和侦听器侧重的应用场景不同:
计算属性侧重于监听多个值的变化,最终计算并返回一个新值
侦听器侧重于监听单个数据的变化,最终执行特定的业务处理,不需要有任何返回值。
猜你喜欢: