watch侦听器是什么？watch侦听器基本使用

2025/1/10 0:11:38

watch 侦听器允许开发者监视数据的变化，从而针对数据的...

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变化是，调用handlerasync 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 侦听器计算属性和侦听器侧重的应用场景不同：计算属性侧重于监听多个值的变化，最终计算并返回一个新值侦听器侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值。码上未来IT实训课程优势01课程内容牛 ●Java、Web、Python、互联网全栈开发、AIGC视觉设计&全媒体运营、短视频运营、视频剪辑、平面设计、电商设计及运营等开发课程，每年迭代课程内容●真实企业资源，学习更深入02专家技术牛 ●技术大咖根据课程体系分重点、分阶段授课●5年以上企业一线开发经验项目经理、技术大牛实战授课03实训案例牛 ●真实的企业一线产品需求案例●全部来自一线的项目经理，带来真实需求一线项目04学习模式牛 ●6个月全日制实训学习，真实的项目经验●讲练结合，掌握更熟练，全程技术老师跟踪辅导05就业服务牛 ●毕业即就业，学员就业●保薪资就业协议入学即签订●4-5轮模拟面试+职业素养课程，全程跟踪，为就业保驾护航●毕业学生享受技术大咖终身支持指导课程适用人群●大学应往届生学习进修、在职提升、转行充电人群；●会基本的电脑操作，打字、有无编程基础均可；●对互联网编程感兴趣，想往网站开发、软件工程、大数据方向发展的人群；●低学历人群经过入学测试后方可选修。